Sass教程：从入门到入门

时间：2015-04-26 16:46:01 阅读：168 评论：0 收藏：0 [点我收藏+]

标签：sass

CSS 令人不爽

写 css 很麻烦，又不好维护，总之令人不爽。

CSS 预处理器

于是就为 css 加入编程元素，这就是“css预处理器”。

Sass vs Less

最广为人知的 css 预处理器是 Sass 和 Less。众多 css 预处理器中谁最优秀，最简短的回答：Sass。

Sass 简介

Sass 是由 Ruby 写的，但与 Ruby 的语法没有一丁点关系，所以学 Sass 不用学 Ruby，只是需要安装 Ruby 而已。

Sass 是 CSS3 的扩展，是 CSS3 的超集。

安装 Ruby

已说过，Sass 是由 Ruby 编写的，所以先安装 Ruby，不同操作系统安装方法不同，Ruby 官网下载地址：https://www.ruby-lang.org/en/documentation/installation/。

检测 Ruby 是否安装成功：

ruby -v

或者

ruby --version

安装Sass

输入如下命令：

gem install sass

检测是否安装成功：

sass -v

或

sass --version

升级 Sass 版本：

gem update sass

Sass 语法

两种语法格式

一种是以 .sass 作为扩展名，这种语法对空格敏感，不用花括号，不用分号：

#div
    width: 100px
    height: 200px

另一种是以 .scss 作为扩展名，又出现了熟悉的花括号和分号：

#div {
    width: 100px;
    height: 200px;    
}

选择哪一种语法？当然是后者。

编译风格

共有四种编译风格：

（1）nested：嵌套缩进的css代码，它是默认值。
（2）expanded：没有缩进的、扩展的css代码。
（3）compact：简洁格式的css代码。
（4）compressed：压缩后的css代码。

sass 001.scss 001.css --style compressed

或

sass --style compressed 001.scss 001.css

如果只是使用：

sass 001.scss

则会将编译后的 .css 输出显示在命令行。

变量

变量名以 $ 符号开头，可包含所有可用作 CSS 类名的字符，包括下划线和中划线。

$width: 100px;

#div {
    width: $width;
    height: 200px;    
}

$width: 2px;

#div {
    border : $width solid red;
}

如果变量需要嵌在字符串中，则变量需要放在 #{} 中：

$dir: top;

#div {
    border-#{$dir} : 2px solid red;
}

如果变量定义在 CSS 规则块之内，则只在此规则块之内有效。

变量名中不区分的中划线和下划线，即 $link_color 与 $link-color 相同：

$link-color: red;

#div {
    color: $link_color;
}

嵌套

选择器嵌套：

#div {
    h1 {
        color: red;
    }
    article {
        p {
            color: green
        }
    }
}

编译后：

#div h1 {
  color: red; }
#div article p {
  color: green; }

父选择器标识符 & ：

a {
    color: red;
    &:hover {
        color: green;
    }
}

编译后：

a {
  color: red; }
  a:hover {
    color: green; }

a {
    color: red;
    p & {
        color: green;
    }
}

编译后：

a {
  color: red; }
  p a {
    color: green; }

群组选择器的嵌套：

aritcle {
    h1, h2, h3, h4 {color: #ccc}
}

编译后：

aritcle h1, aritcle h2, aritcle h3, aritcle h4 {
  color: #ccc; }

aritcle, aside {
    h1, h2 {color: #ccc}
}

编译后：

aritcle h1, aritcle h2, aside h1, aside h2 {
  color: #ccc; }

组合选择器：> + ~，无需使用父选择器标识符 & ；可以用在外层选择器的后边，也可以用在里层选择器的前边：

aritcle {
    > section {color: red}
    + section {color: green}
    ~ section {color: blue}
    dl > {
        dt {color: #ccc}
        dd {color: #666}
    }
}

编译后：

aritcle > section {
  color: red; }
aritcle + section {
  color: green; }
aritcle ~ section {
  color: blue; }
aritcle dl > dt {
  color: #ccc; }
aritcle dl > dd {
  color: #666; }

属性也可以嵌套，嵌套规则是：用 ":" 把属性名从中划线 "-" 的地方断开，在根属性后边添加一个冒号，紧跟一个 "{}" 块，把子属性部分写在 "{}"块中：

nav {
    margin: {
        top: 10px;
        left: 5px;
    }
}

编译后：

nav {
  margin-top: 10px;
  margin-left: 5px; }

nav {
    margin: 15px {
        top: 10px;
        left: 5px;
    }
}

编译后：

nav {
  margin: 15px;
    margin-top: 10px;
    margin-left: 5px; }

@import

Sass 重写了 @import。原生的 CSS 执行到 @import 时才会去下载其导入的 CSS 文件。Sass 的 @import 在生成 CSS 文件时就把相关文件导入进来。

使用 Sass 的 @import 不需要指定导入文件的扩展名，即可以省略 .scss 或 .sass。

Sass 允许 @import 写在 CSS 规则内。

Sass 有一个文件命名约定，对于不需要生成对应的独立 CSS 文件，只作为 @import 编写的 Sass 文件，被称为局部文件，局部文件名以下划线开头，导入局部文件时，可以省略该下划线。

以下三种情况会使用 CSS 原生 @import：

（1）被导入的文件名以 .css 结尾；

（2）被导入的文件名是一个 URL 地址，如 http://www.xxx.com/style/xxx.css；

（3）被导入的文件名是 CSS 的 url() 值。

!default

!default 用于变量，含义是：如果这个变量被声明赋值了，那就用它声明的值，否则就用这个默认值：

$width: 10px;
$width: 20px !default;
$height: 10px;
$height: 20px;

#div {
    width: $width;
    height: $height;
}

编译后：

#div {
  width: 10px;
  height: 20px; }

注释

CSS 标准格式的注释是： /* ... */。

Sass还有一个注释，叫静默注释：// 注释内容。这种注释不会出现在生成的 CSS 文件中。

混合器

变量是为了重用某个值，混合器则可以重用大段样式。

混合器使用 @mixin 标识符定义，使用 @include 引用这个混合器。

@mixin rounded-corners {
       -moz-border-radiux: 5px;
    -webkit-border-radius: 5px;
            border-radiux: 5px;
}

#div {
    color: red;
    @include rounded-corners;
}

编译后：

#div {
  color: red;
  -moz-border-radiux: 5px;
  -webkit-border-radius: 5px;
  border-radiux: 5px; }

在混合器中也可以使用 CSS 规则：

@mixin rounded-corners {
       -moz-border-radiux: 5px;
    -webkit-border-radius: 5px;
            border-radiux: 5px;
    a {
        color: red;
    }
    & span {
        color: blue;
    }
}

#div {
    color: red;
    @include rounded-corners;
}

编译后：

#div {
  color: red;
  -moz-border-radiux: 5px;
  -webkit-border-radius: 5px;
  border-radiux: 5px; }
  #div a {
    color: red; }
  #div span {
    color: blue; }

可以给混合器传参，参数可以有默认值：

@mixin rounded-corners($size, $color, $color2: red) {
       -moz-border-radiux: $size;
    -webkit-border-radius: $size;
            border-radiux: $size;
    a {
        color: $color;
    }
    & span {
        color: $color2;
    }
}

#div {
    color: red;
    @include rounded-corners(10px, green);
}

编译后：

#div {
  color: red;
  -moz-border-radiux: 10px;
  -webkit-border-radius: 10px;
  border-radiux: 10px; }
  #div a {
    color: green; }
  #div span {
    color: red; }

选择器继承

选择器继承是指一个选择器可以继承另一个选择器定义的样式，继承使用 @extend 。

.error {
    color: red;
    font-size: 16px;
}
.syntax {
    background-color: blue;
    @extend .error;
}

编译后：

.error, .syntax {
  color: red;
  font-size: 16px; }

.syntax {
  background-color: blue; }

表达式

只要能放在属性右边的都可以称为表达式，如一个简单的值 bold 或 5px，也可以是值的列表 2px solid #ccc。

表达式中不仅能包含变量，还可以包含数学运算符。

数据类型

CSS 属性或 Sass 变量中的每个值都有一个类型，类型不同，动作方式也不同，Sass 能理解所有的这些类型。

字符串

包括无引号字符串和有引号字符串，bold、auto、center 属性于无引号字符串，"microsoft yahei" 属于有引号字符串。

字符串连接运算符是："+"。如果两个字符串都是无引号字符串，则结果也是无引号字符串；如果两个字符串都是有引号字符串，则结果也是有引号字符串；如果一个是有引号字符串，一个是无引号字符串，则结果与是否有引号取决于左边的字符串。

div + p    divp
"div" + p    "divp"
div + "p"    divp

数值

数值包括两部分：实际的数值及单位。

当对带有单位的数值做乘法和除法运算时，单位也一起做乘法和除法运算，如：

5em*4px    20em*px
16px/1em    16px/em

这有什么用呢？可以用在单位转换，如 16px/em 代表 1em 是 16px。

对带单位的数值做加法或减法运算时，Sass 会自动转换，否则如果不能转换则出错。
还可以使用取模运算：%。

除法 “/” 有些特殊，因为 "/" 即可以表示除法，也可以表示一个普通斜杠，以下三个情况满足任何一个都会使用除法：

（1）在 / 的任意一边使用一个变量；

（2）整个值被小括号包围；

（2）该值被用作其他算术表达式的一部分。

$var: 1px; $var/2px;
(1px/2px);
1 + 1px/2px;

颜色

不论最初的颜色值以何种形式表示，Sass 内部会同时使用 RGB 和 HSL 来表示颜色。

列表

列表是一个数值的序列，用来表示 border、font等属性，如 2px solid #ccc，也可以是以逗号隔开。

算术运算符对列表没什么用。

布尔值

布尔值只有两种：true 和 false。

布尔值不使用算术运算符，它们有自己的操作符：and、or 和 not。

返回布尔值的操作符：

<
<=
>
>=
==

对于小于和大于，只用于数字；对于 == 则可以用于全部类型。

函数

和 CSS 函数不同，Sass 函数可以使用关键字变量，这意味着不是通过参数顺序来指明参数，而是可以显示地命名几个或者所有的变量：

rgb($green: 127, $blue: 127, $red: 255)

数值函数

（1）abs($number) 取$number的绝对值；

（2）ceil($number) $number向上取整；

（3）floor(($number) $number向下取整；

（4）round($number) $number四舍五入；

（5）percentage($number) 将小数$number转换为百分数；

（6）comparable($number1, $number2) $number1和$number2是否能比较；

（7）unit($number) 返回$number的单位；

（8）unitless($number) 返回$number是否没单位。

颜色函数

（1）alpha($color)/opacity($color) 返回$color的alpha通道；
（2）blue($color) 返回$color的蓝色通道；
（3）green($color) 返回$color的绿色通道；
（4）red($color) 返回$color的红色通道；
（5）hue($color) 返回$color的色度属性；
（6）lightness($color) 返回$color的亮度属性；
（7）saturation($color) 返回$color的饱和度属性；
（8）complement($color) 返回$color色环与与$color的互补；
（9）grayscale($color) 返回$color的灰度版本；
（10）invert($color) 返回$color的反相版本；
（11）mix($color1, $color2, [$weight]) 按照$weight的百分比将$color1和$color2混合在一起；
（12）$adjust($color, ...) 按照给定的的颜色成分调整$color的各个属性；
（13）$scale($color, ...) 按照百分比调整$color的各个属性；
（14）$set($color, ...) 将$color的各个属性设置为固定值。

列表函数

（1）nth(a b c, $n) 返回列表第$n个值；
（2）join($list1, $list2, [$separator]) 将两个列表连接起来，如果没有$separator，则分隔符以第一个为准；
（3）length($list) 返回$list列表中项目的个数。

其他函数

（1）type-of($value) 返回一个无符号字符串，代表$value的类型，可以是：number、string、color、bool、list；
（2）if($condition, $if-true, $if-false) 就像三元运算符，如果$condition为true，则返回$if-true，否则返回$if-false。

自定义函数

使用 @function 指令自定义函数，每个 @function 必须返回一个结果。

@function width($w) {
    @return $w * 100px;
}

控制指令

@for

@for 指令用来计数，有两种语法：

（1）@for $i from to

（2）@for $i from through

@for $i from 1 to 5 {
    .box-#{$i} {
        width: 100px * $i;
    }
}

编译后：

.box-1 {
  width: 100px; }

.box-2 {
  width: 200px; }

.box-3 {
  width: 300px; }

.box-4 {
  width: 400px; }

@for $i from 1 through 5 {
    .box-#{$i} {
        width: 100px * $i;
    }
}

编译后：

.box-1 {
  width: 100px; }

.box-2 {
  width: 200px; }

.box-3 {
  width: 300px; }

.box-4 {
  width: 400px; }

.box-5 {
  width: 500px; }

可以看出这两种语法的差异在于要不要包括最后一个数字。

@each

@each 指令多次重复一个样式块。

@each $item in home, about, archive {
    nav .#{$item} {
        background-image: url(/images/#{$item}.png);
    }
}

编译后：

nav .home {
  background-image: url(/images/home.png); }

nav .about {
  background-image: url(/images/about.png); }

nav .archive {
  background-image: url(/images/archive.png); }

@each 指令中的列表可以用逗号分开，也可以用空格分开。

@if @else

@if 指令用来控制一个样式块是否使用，其中也可以与 @else if 及 @else指令配合使用。

$flag: 2;
.nav {
    @if $flag == 1 {
        width: 100px;
    } @else if $flag == 2 {
        width: 200px;
    } @else {
        width: 300px;
    }
}

编译后：

.nav {
  width: 200px; }

参考

（1）《Sass与Compass实战》

（2）http://www.ruanyifeng.com/blog/2012/06/sass.html

Sass教程：从入门到入门

标签：sass

原文地址：http://blog.csdn.net/wozaixiaoximen/article/details/45269719

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行