所有分类
  • 所有分类
  • WP插件Pro
  • HTML模板
  • 微信小程序模板
  • 源码

SASS教程 +SCSS:CSS 再进化,掌握语法攻略!

这几天摸索了SASS+SCSS的写法,发现有许多的GitHub项目,使用它进行开发。

自己进行几个项目后,编写速度确实有提升,于是整理出这篇 SASS+SCSS 教程,从 SASS+SCSS 介绍 → 安装+执行 → 语法 SASS教程 ,进行文章编写。

不敢说可以从入门到进阶,但对SASS主观念的掌握,应该是没问题的,那我们开始啰 ? ?

  • 1. SASS+SCSS介绍
  • 2. 安装+执行
  • 3. 嵌套
  • 4. 引用父选择器 &
  • 5. 变量
  • 6.引入
  • 7. 混合
  • 8. 继承
  • 9. 操作符
  • 10.结论

1. SASS+SCSS 介绍

SASS 是一个成熟且稳定的 CSS 预处理器,除了把普通的 CSS 语法强化,它还使用了 SassScript 增加了许多功能,如:变量、嵌套、混合、导入等 .. 功能,在一般项目的编写或是中大型的项目上,都可以编写的更加快速。

SASS 会编译(compiled)程序码,转成一般 CSS 形式,让浏览器可以解读输出,把页面呈现出来。

主要包含两种写法:分别是旧版的 SASS(缩排语法,副档名.sass,使用缩排来区分程序码块,与 Haml 类似)和新版的 SCSS(块语法,扩展名.scss,使用和 CSS 相同方式,用大括号分开)。

SCSS 的原型是 SASS,所以都通称 SASS 也没问题,只是写法有些许不同,我们先来看一下:

/** 一般 css 写法 **/

.nav{
    background: #ccc;
}
.nav li {
    display: inline-block;
}
.nav li a{
    display: block;
    padding: 15px;
    text-decoration: none;
    color: #000;
}
.nav li img{
    width: 100%;
}

SASS写法:采用缩进语法(TAB)的方式,去除了一般 CSS 的括号、分号等 .. 加快编写流程,有一部分的人喜欢这样的编写方式而采用,如下:

/** sass写法 **/

.nav
    background: #ccc
    li
        display: inline-block
        a
            display: block
            padding: 15px
            text-decoration: none
            color: #000
        img
            width: 100%

SCSS写法:采用“ 块语法(Block)」,一般从 CSS 转为 SCSS 开发比较无痛,保留了括号、分号等 .. 元素,相对于上面的 SASS 是比较新的编写方式,学习成本比较低,是目前主流的方式,如下:

/** scss写法 **/

.nav{
    background: #ccc;
    li {
        display: inline;
        a {
            display: block;
            padding: 15px;
            text-decoration: none;
            color: #000;
        }
        img {
            width: 100%;
        }
    }
}

看完上面的程序码,会发现 SASS 可以协助解决编写 CSS 常遇到的几个问题,如:「 重复编写 」、「 后续维护 」、「 漏写问题 」等问题 ..,然后加快开发流程,如下:

  1. 父选择器,重复编写:如要扩充页面样式,就会不断的加上 .nav li .. 等父级 class 名称,比较费工!
  2. 属性样式,重复编写:常会看到许多 CSS 属性,是许多区块都需要用到,在 SASS 没出来前,每个区块都需特别写一遍,现在直接引用即可。
  3. 后续维护:若哪天需要把 .nav 这个 class 名称更换,就需全部替换,比较麻烦。
  4. 漏写问题:SASS / SCSS 有条理的节省了许多代码编写,降低漏写的Bug。

若想了解更多 SASS & SCSS 差异,也可以 看这篇 stack oveflow 的讨论:)


2. 安装+执行

安装+执行 SASS 的方式有满多种,有使用第三方应用程序的,也有直接安装在本机上的,这边会建议直接安装在本机上,比较一劳永逸,这边列出几种安装方式,如下:

SASS 安装

1. 使用 Node.js 安装 $ npm install -g sass

2. 使用 Ruby 安装 $ gem install compass

3. 使用 Brew 安装(Mac专用)$ brew install sass

命令运行完成,基本上就安装好了,若想测试是否安装成功,可以输入看是否有显示 SASS 版本号,若有的话代表安装完成 ? ?$sass -v

SASS 执行

首先在项目文件夹下,生成 index.html 和两个文件夹 css、sass ,然后在 sass 下面新增一个 style.scss,这支文件是我们开发,主要编写样式的文档。

sass 範例文档
sass 範例文档

我们现在要试着把 sass 文件夹里的 style.scss ,编译成浏览器看的懂的 .css 扩展名型式。

所以下指令把 style.scss 文档转译生成 style.css,并放置在 css 文件夹里,如下:

$ sass sass/style.scss:css/style.css

如果顺利的话,应该会看到 css 文档夹里,新增了两个文档,分别是「 style.css 」和「 style.css.map 」,这边比较要留意的是 style.css(浏览器主要解读这只文件)。

sass 转换成 css
sass 转换成 css
  1. 需留意“ 当前路径 ”,这会影响到 style.scss 文档编译生成 style.css 的路径,若不对会报错唷 ? ?
  2. 在 index.html 里面,记得引入 style.css 文档( style.scss 不需引入 ),才会有样式出现唷!

若持续有样式需新增,每次一编写完 style.scss 就得执行一次 指令,才能在浏览器上看到变化,相信一定会很想撞墙 ? ?$ sass sass/style.scss:css/style.css

所以这时可以改下另一个指令(加上参数,若原有的 style.css / style.css.map 已存在,会自动覆盖,不存在的话会自动生成新的),如下:--watch

$ sass --watch sass/style.scss:css/style.css

执行后,会发现 sass 已经开始在监听 style.scss ,若这只文档有修改,style.css 变会即时的进行编译,给浏览器做使用,如下影片:

在开发过程中,一个项目可能不只有一个样式文件,假如有多个文档需同时进行监听,这边提供几个方式给大家:

1. 重复执行:看有几个文档需监听,就输入几次。

$ sass --watch path/to/filename.scss:path/filename.css

2. 一次执行:看有几个文档需监听,一次下指令。

$ sass --watch path/filename1.scss:path/filename1.css path/filename2.scss:path/filename2.css path/filename3.scss:path/filename3.css

3. 指定目录下全部监听:监听 sass 目录下的 sass/scss 文档到指定的 css 目录下(下面指令为两个文件夹在同一层)

$ sass --watch sass:css

4. 当前目录下全数监听,并直接生成 css 文档。

$ sass --watch .

到了这一步,若顺利的话,相信你也学会,如何在编写 sass/scss 文档时,指定的 css 文档可以同步的进行编译,并让浏览器能够顺利的出现画面。

个人觉的 sass 学习比较麻烦的就是安装+执行这个章节,后面就是语法部分,语法就相对简单明了了,原来就有 css 开发经验的捧有们,相信也可以很快就入手的 ? ?

接下来,我们开始前进到语法部分啰:)


3. 嵌套

SASS 提供 CSS 语法扩展,如:嵌套功能( Nested Rules ),主要是解决 CSS 编写过程中,父元素重复编写问题,可以缩短开发流程、方便后续维护、样式模块化等.. 优点 ? ?

这是容易入门 SASS教程 的第一步,直接上代码,我们使用 SASS 编写样式,并对比编译后的 CSS ,如下:

/** 编译前( sass 语法 ) **/

#main {
    width: 200px;
    height: 100px;
    background: #ddb92a;

    .greenbox{
        width: 100px;
        height: 50px;
        background: green;
        p, a {
            font-size: 20px;
        }
    }
}
/** 编译后( 转为 CSS 语法输出 ) **/

#main {
    width: 200px;
    height: 100px;
    background: #ddb92a;
}
#main .greenbox{
    width: 100px;
    height: 50px;
    background: green;
}
#main .greenbox p, #main .greenbox a{
    font-size: 20px;
}

除此之外,常用的属性也可以进行 CSS「嵌套属性」,比如: 、、,会发现 多次出现。font-familyfont-sizefont-weightfont

还有常见的 系列,比如:、、、,都可以用嵌套功能,来节省开发时间唷,这边上代码,如下 ? ?backgroundbackground-colorbackground-positionbackground-sizebackground-image

/** 编译前( sass语法 ) **/

.main {
    font: {
        family: Helvetica, sans-serif;
        size: 15em;
        weight: bold;
    }
}

/** 编译后( 转为 CSS 语法输出 ) **/

.main {
    font-family: Helvetica, sans-serif;
    font-size: 15em;
    font-weight: bold;
}

到目前,对嵌套功能应该有初步认识了,若之前有看过别人写的 SASS / SCSS 文件,应该会有种似曾相似的感觉吧 ? ?

理解了它,接下来我们继续看 SASS 还有什么特别的地方,可以让我们学习的 ..


4. 引用父选择器 &

如果想在嵌套状态下,取得外层的父选择器,那可以使用「 & 」,它会直接抓父选择器给你用。

常会把它用在,如 CSS 元件状态: 、、、、 等 ..,或是 、 ,这边上个代码,如下::hover:focus:hover:link:visited:before:after

/** 编译前( sass语法 ) **/

#main {
    display: block;
    a {
        color: #d0b95b;
        &:hover, &:active, &:focus {
            color: #a08106;
            outline: none;
            text-decoration: none !important;
        }
    }
}

/** 编译后( 转为 CSS 语法输出 ) **/

#main {
    display: block;
}
#main a {
    color: #d0b95b;
}
#main a:hover, #main a:active, #main a:focus {
    color: #a08106;
    outline: none;
    text-decoration: none !important;
}

还有另一种用法,也常常看到,如下:

/** 编译前( sass语法 ) **/

#main{
    &.color-2{
        background: red;
        &:before{
            border: 1px solid #ccc;
        }
    }
    &.color-3{
        background: yellow;
        &:before{
            border: 1px solid blue;
        }
    }
}

/** 编译后( 转为 CSS 语法输出 ) **/
#main.color-2 {
    background: red; 
}
#main.color-2:before {

    border: 1px solid #ccc; 
}
#main.color-3 {
    background: yellow; 
}
#main.color-3:before {
    border: 1px solid blue; 
}

能抓到父选择器,是不是开发起来也方便多了呢?

一开始看到别人编写的 SASS 时,觉得「 & 」的写法满酷的,后来才懂 .. 原来是这样运作呀 ? ?


5. 变量

在我们实际编写 CSS 的过程中,常会遇到多次相同的颜色、字体、字体大小等 .. 重复出现。

重复出现是好事,因为只要复制+贴上就好了 .. 但假如遇到哪天设计师 / 客户,需要修改就 .. (因为全都需要更改 ? ? )

所以SASS可以协助我们解决这问题,就如同JS变量逻辑一样,只需改最源头的变量即可,其他所有引用该变量的地方,值都会自动更改。

SASS 中使用 进行变量声明,支持 7 种主要数据类型:$

  • 数字(如:, , )11.520px
  • 字符串,带引号和不带引号(如:, , )"foo"'foo'foo
  • 颜色(如:, , )red#28b0b4rgba(0, 0, 0, 0.5)
  • 布尔值(如: , )truefalse
  • 空值(如: )null
  • 值列表(list),用空格或逗号分开(如:、 )2em 1em 0 1emHelvetica, Arial
  • maps:从一个值映射到另一个(如:)(key1: value1, key2: value2)

在此选择对比一下,使用 SASS 开发的编译前( SASS 语法) & 编译后( 转为 CSS 语法输出)的代码,如下:

/** 编译前( sass 语法 ) **/

$bnr-font: Helvetica, sans-serif;
$bnr-color: #494947;

.banner1 p{
    font-family: $bnr-font;
    color: $bnr-color;
    padding: 10px 15px;
    letter-spacing: 0.2em;
}
.banner2 p{
    font-family: $bnr-font;
    color: $bnr-color;
    margin: 15px;
}
/** 编译后( 转为 CSS 语法输出 ) **/

.banner1 p{
    font-family: Helvetica, sans-serif;
    color: #494947;
    padding: 10px 15px;
    letter-spacing: 0.2em;
}
.banner2 p{
    font-family: Helvetica, sans-serif;
    color: #494947;
    margin: 15px;
}

如此一来,当哪天收到需要更改某通用按钮颜色、通用字体字体 .. ,就可以直接更改变量即可,是不是很方便 ? ?


6.引入

SASS 扩展了 CSS 的 功能,允许在文档内导入其他的 SASS 或 SCSS 子文件。@import

在文件进行编译后,被导入的 SASS 或 SCSS 子文件,会全部合并到同一个 CSS 文件,然后呈现出来。

常见的 .sass 或 .scss 导入

这边展示一下基本用法,我们把 导入到 中,直接上代码:_reset.scssmain.scss

/** 编译前( sass 语法 ) **/

/** _reset.scss **/
html, body, ul, ol, a {
    margin:  0;
    padding: 0;
}

/** main.scss **/
@import 'reset';
body {
    background: #a08106;
    font-size: 16px;
}
/** 编译后( 转为 CSS 语法输出 ) **/

html, body, ul, ol, a {
    margin:  0;
    padding: 0;
}
body {
    background: #a08106;
    font-size: 16px;
}

小提醒:若有多个文件需导入,可同时使用多个 引用文件,如下图 ? ?@import

bootstrap 多个文件引入
bootstrap.scss 多个文件引入

监听父文件即可

编写代码过程中,可以把不同样式区块的 SASS 或 SCSS 代码,拆开成不同独立的文档,然后使用 把各片段文件,统整导入到同一支 或 文档中,并监听这一支文件即可 ? ?@import.sass.scss

在文件进行监听时,所有进来的或 子文件,也同时被监听,所以当子文件有修改,父文件编译出的也会自动更新。@import.sass.scss.css

使用下划线,SASS 编译自动忽略

若有片段文件不需 SASS 编译出新的 CSS 文件,可在文件开头添加一个下划线,在编译过程中,系统就会忽略它,而只对开头无下划线的文件,进行新的 CSS 文件生成。

上述的范例说明

看一下另一个范例,下面是 bootstrap 的目录文件:

sass 的 @import 功能
左图:目录结构 。 右图: bootstrap.scss 文件
  1. 把多个 scss 文件,使用 添加到 bootstrap.scss 中。 之后只需监听 bootstrap.scss 这一支文件即可,假如内部 的文件有变更,都会在 bootstrap.css 自动更新。@import--watch@import
  2. bootstrap.scss 文件内的 文档,不需要加下划线。@import
  3. 开头有下划线的文件,在执行 sass 指令时,不会生成新的 css 文件,系统会自动忽略。
  4. @import scss 片段文件,不用加上副档名也可以,系统会自动寻找同名的副档名 或 文件,并依序导入。.scss.sass

一般 CSS @import 功能

@import 默认情况,会默认导入同名的 或 文件,但在以下情况下,仅当成一般的 CSS 语句,不会导入任何的 SASS 文件,如下:.sass.scss@import

  • 如果文档扩展名 :.css@import "foo.css";
  • 文档名开始 :http://@import "http://foo.com/bar";
  • 文档名 :url()@import url(foo);
  • @import 中包含媒体查询(media queries)

7. 混合

若是有重复的代码,会不断使用到,就可用混合指令(Mixin Directives),直接把样式封装成一个类名称,就可以重复调用,如下:

/** 编译前( sass 语法 ) **/

/** 定义 mixin 指令 **/
@mixin font-main {
    font: {
      family: Arial;
      size: 16px;
      weight: 100;
    }
    color: #000;
}

/** 引用 mixin **/
.box p {
    @include font-main;
}
/** 编译后( 转为 CSS 语法输出 ) **/

.box p {
  font-family: Arial;
  font-size: 16px;
  font-weight: 100;
  color: #000; 
}
  • 使用 定义一个“ 混合 ”@mixin
  • 使用 引用一个“ 混合 ”@include
  • 可同时引用多个“ 混合 ”

使用参数功能

使用“ 混合 ”功能,有设置参数功能( 可设置默认值 ),让整体功能变更弹性,有点像函数的传入参数,如下:

/** 编译前( sass语法) **/

/** 定义mixin 指令 **/
@mixin border-set($color, $width, $style: solid) {
    border: {
        color: $color;
        width: $width;
        style: $style;
    }
}
@mixin background-set($color, $image, $repeat) {
    background: {
        color: $color;
        image: url($image);
        repeat: $repeat;
    }
}

/** 引用 mixin **/
.box div {
    @include border-set(red, 2px);
    @include background-set(green, "../img_tree.png", 'no-repeat');
    letter-spacing: 0.5em;
}
/** 编译后( 转为 CSS 语法输出 ) **/

.box div {
  border-color: red;
  border-width: 2px;
  border-style: solid;
  background-color: green;
  background-image: url("../img_tree.png");
  background-repeat: "no-repeat";
  letter-spacing: 0.5em; 
}

8. 继承

「 繼承 」 是一個滿實用的功能,若想讓多個 class 使用相同樣式,就可使用 直接繼承過來,減少重複編寫的時間,如下:@extend @extend

/** 编译前( sass语法 ) **/

%msg-style {
    display: block;
    flex-wrap: wrap;
    background: #d9d9d8;
    color: #000;
}

.msg {
    @extend %msg-style;
}

.msg-success {
    @extend %msg-style;
    background: #34fc6d;
}

.msg-error {
    @extend %msg-style;
    background: #fc253e;
}
/** 编译后( 转为 CSS 语法输出 ) **/

.msg, .msg-success, .msg-error {
  display: block;
  flex-wrap: wrap;
  background: #d9d9d8;
  color: #000; 
}

.msg-success {
  background: #34fc6d; 
}

.msg-error {
  background: #fc253e; 
}
  • 使用站位选择器 ,定义一个样式,被定义的类,它将不会被编译出来。%
  • 若没有标注的类,也可以使用引入,但定义的类会被编译出来。%@extend
  • 有使用的类,会被系统编译整合,使用共享样式。@extend

多重扩展,可引入多个选择器

同一个选择器,可以使用 扩展多个选择器,这代表它继承了扩展选择器的样式,如下:@extend

/** 编译前( sass语法 ) **/

.error {
    background-color: #fa945c;
}

.notice {
    font-size: 16px;
    font-family: sans-serif;
    font-color: #000;
}

.seriousError {
    @extend .error;
    @extend .notice;
    background-color: #ff1b1b;
}
/** 编译后( 转为 CSS 语法输出 ) **/

.error, .seriousError {
  background-color: #fa945c; 
}

.notice, .seriousError {
  font-size: 16px;
  font-family: sans-serif;
  font-color: #000; 
}

.seriousError {
  background-color: #ff1b1b; 
}

上面几个状况,应该是比较常见的功能,应该满足够使用了,若想了解更多,可以直接参考 SASS 官方。@extend


9. 操作符

SassScript 支持对数字的运算,如:(加法 、减法 、乘法 、除法 、取模 等 .. ),来看一下代码,如下:++*/%

/** 编译前( sass 语法 ) **/

div a {
    $width: 500px;
    width: $width/2;             // 使用变量,和 / 
    font: 16px/10px;             // 原生CSS,不作为除法
    height: (250px/2);           // 使用了(), 和 /
    margin-left: 10px + 8px/2px; // 使用了 +, 和 /
}
/** 编译后( 转为 CSS语法输出 ) **/

div a {
  width: 250px;
  font: 16px/10px;
  height: 125px;
  margin-left: 14px; 
}

简单来说,就是增加了运算功能,有需要也可进行使用。

这边也有另一个范例,如下:

/** 编译前( sass语法 ) **/

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 700px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 400px / 960px * 100%;
}
/** 编译后( 转为 CSS 语法输出 ) **/

.container {
  width: 100%; 
}

article[role="main"] {
  float: left;
  width: 72.9166666667%; 
}

aside[role="complementary"] {
  float: right;
  width: 41.6666666667%; 
}

10.结论

如果能看到这边,首先给自己掌声! 相信对SASS教程,也有程度的认识了!

接着,可以找个小案子,来自己练习,你会发现,CSS 结合了 JS 特性,开发起来会变得更加快速(省了很多代码 ? ? )

SASS 在入门安装+下指令时,会有些要适应,但这边搞定后,会发现后面语法观念,其实很容易上手,优化了传统 CSS 开发上的许多不变。

希望这篇 SASS教程 文,有帮助到需要的捧有们,我们下篇文章见

原文链接:https://www.itaoda.cn/blog/10219.html,转载请注明出处。

0
使用和安装有任何问题
请加客服QQ:1442071397 或wechat:pufei889


免责声明

本站所发布的部分内容自网络,该部分内容限用于学习和研究目,有版权问题的,下载后的24个小时之内,从您的电脑中彻底删除。且不得将用于商业或者非法用途,否则,一切后果请用户自负,与本站无关。

评论0

请先
没有账号?注册  忘记密码?

社交账号快速登录

× 发送
微信扫一扫

温性提示

演示站服务器在国外,网站打开速度有点慢,请耐心等待

多功能、多行业外贸商城 wordpress商城WOOCOMMERCE

23+
行业模板