Sass学习入门

薛大哈
389 阅读9分钟

前言

Sass是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅，同时，Sass还有类似于JavaScript的函数、控制指令等的SassScript的语法。作为一名前端开发者我们有必要对Sass进行学习。

一、变量

Sass的一个重要特性就是它为css引入了变量。可以把反复使用的css属性值 定义成变量，然后通过变量名来引用它们；Sass使用$标识作为变量的声明。

$primary-color: #333;

二、嵌套

Sass使用样式嵌套规则，避免重复写css选择器。

2.1、嵌套规则

.nav {
    width: 500px;
    ul {
        width: 100%;
        li {
           color: #333; 
        }
    }
}

上面的Sass代码将会编译为下面的Css代码：

.nav { width: 500px; }
.nav ul { width: 100%; }
.nav ul li { color: #333;  }

2.2、嵌套父选择器&

在Sass中，&代表嵌套规则外层的父选择器。

ul {
    width: 100%
    li {
        color: #333; 
        a {
            font-size: 12px;
            &:hover {
                font-size: 16px;
            }
        }
    }
}

在上面Sass代码中，&表示的是ul li .a这个选择器。

2.3、嵌套属性

相同前缀的样式也可以使用Sass的嵌套规则，避免重复写css样式。

div {
    font: {
        size: 16px;
        weight: bold;
        family: Arial; 
    }
    border: 1px solid #333 {
        left: 0;
        right: 0;
    }
}

上面的Sass代码将会编译为下面的Css代码：

div {
    font-size: 16px;
    font-weight: bold;
    font-family: Arial; 
    border: 1px solid #333;
    border-left: 0;
    border-right: 0;
}

三、混合器mixin

Sass的混合器mixin是实现大段样式重用的一种方式，其定义类似于JavaScript的函数，也接受参数。混合器使用@mixin标识符定义，通过@include使用相应混合器。

混合器mixin定义格式：

@mixin 名称 (参数1, 参数2, ...) {
    css规则...
}

具体的例子如下：

@mixin alert ($text-color, $text-size) {
    color: $text-color;
    font-size: $text-size;
}

.alert-wranning {
    @include alert(#333, 16px);
}

上面的Sass代码将会编译为下面的Css代码：

.alert-wranning {
    color: #333;
    font-size: 16px;
}

四、继承extend

继承是Sass的一个重要特性，可以通过@extend语法实现选择器继承。所谓选择器继承就是一个选择器可以继承另一个选择器定义的所有样式。

继承extend的格式：

@extend 名称;

具体的例子如下：

.alert {
    color: #333;
    font-size: 16px;
}

.alert-wranning {
    @extend .alert;
}

上面的Sass代码将会编译为下面的Css代码：

.alert-wranning {
    color: #333;
    font-size: 16px;
}

值得注意的是，使用继承会继承父选择器所有选择器(包括嵌套的子选择器)的样式。

.alert {
    color: #333;
    font-size: 16px;
    a {
        color: #666；
    }
}

.alert-wranning {
    @extend .alert;
}

上面的Sass代码将会编译为下面的Css代码：

.alert-wranning {
    color: #333;
    font-size: 16px;
}
.alert-wranning a {
    color: #666；
}

通过上面的例子，我们可以发现.alert-wranning除了继承了.alert的样式外，还继承了.alert中嵌套的子选择器a的样式。

五、模块导入

Sass拓展了 @import 的功能，允许其导入 Scss或Sass文件。 被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

模块导入的格式：

@import 文件名称;

5.1、@import的使用

具体的例子如下：

//base.scss
body {
    padding: 0;
    margin: 0;
}

@import 'base';

.alert {
    color: #333;
    font-size: 16px;
}

上面的Sass代码将会编译为下面的Css代码：

body {
    padding: 0;
    margin: 0;
}

.alert {
    color: #333;
    font-size: 16px;
}

5.2、模块导入规则

通常，@import寻找Sass文件并将其导入，但在以下情况下，@import仅作为普通的CSS语句，不会导入任何Sass文件:

  • 文件拓展名是 .css；
  • 文件名以http://开头；
  • 文件名是url()；
  • @import包含media媒体查询参数。

如果不在上述情况内，文件的拓展名是.scss或.sass，则导入成功。没有指定拓展名，Sass将会试着寻找文件名相同，拓展名为.scss或.sass的文件并将其导入。

六、注释Comment

// 单行注释，不会被压缩编译到css文件中

/
* 多行注释
* 不会被压缩编译到css文件中
*/

/
*! 强制多行注释
* 会被压缩编译到css文件中
*/

七、数据类型Data-Type

Sass中也有数据类型的说法，在Sass中有7种数据类型：

  • 数字number，1, 2, 15, 10px
  • 字符串string，有引号字符串与无引号字符串，"foo", 'bar', baz
  • 颜色color，blue, #04a3f9, rgba(255,0,0,0.5)
  • 布尔型boolean，true, false
  • 空值null，null
  • 数组(list)，用空格或逗号作分隔符，1.5em 1em 0 2em, Helvetica, Arial, sans-serif
  • maps, 相当于JavaScript的object，(key1: value1, key2: value2)

7.1、数字类型number

Sass中的数字类型可以进行数学运算。

(2px + 1px) //3px
(2px - 1px) //1px
(8px / 2) //4px
(2px * 5) //10px
(2px * 5px) //10px*px
(8px / 2px) //4

7.2、字符串类型string

Sass中的字符串类型可以进行使用```+、-``号进行字符串拼接。

'hello' + 'world' //helloworld
'hello' + world //helloworld
hello - world //'hello-world'
hello / world //'hello/world'
hello * world //报错，不支持

7.3、颜色类型color

Sass中的字符串类型主要指的是各种表示颜色的属性值，例如red、#333、rgba()等。

red //string表示法
#fff000 //Hex十六进制表示法
rgb(255, 0, 0) rgba(255, 0, 0, 0.8) //RGB表示法
hsl(0, 100%, 50%)  hsla(0, 100%, 50%, 0.8) //hsl色相、饱和度、明度表示法

7.4、列表类型list

Sass中的列表类型类似于数组，表示CSS中通过空格或者逗号分隔的一系列的值。事实上，独立的值也被视为数组 —— 只包含一个值的数组。

border: 1px solid #333;
font-face: Helvetica, Arial, sans-serif;
padding: 0 10px 5px 0;

7.5、map类型

Sass中的map类型类似于object，使用key : value名值对形式来表示一个样式集合。

map类型的表示形式：

$map: (key1: value1, key2: value2, ...)

具体例子如下：

$color: (light: white, dark: black)

7.6、布尔值类型boolean

Sass中的布尔值类型包括true、false，关系运算 <, >, <=, >=的比较结果就是布尔值类型。

(5px > 10px) //false
(5px < 10px) //true
not(5px < 10px) //false
(5px > 10px) and (5px < 10px) //false
(5px > 10px) or (5px < 10px) //true

八、内置函数

Sass中还为其数据类型内置了一系列函数供开发者便捷使用。

8.1、数字类型函数

  • abs(num)：返回参数的绝对值
  • round(num)：返回参数四舍五入的值
  • ceil(num)：向上取整参数值
  • floor(num)：向下取整参数值
  • percentage(num)：返回百分比形式的参数值
  • min(num1, num2, ...)：返回参数值中的最小值
  • max(num1, num2, ...)：返回参数值中的最大值
abs(10px) //10px
abs(-10px) //10px

round(4.1) //4
round(4.6) //5

ceil(4.1) //5
ceil(4.6) //5

floor(4.1) //4
floor(4.6) //4

percentage(200px / 400px) //50%

min(1, 2, 3) //1
max(1, 2, 3) //3

8.2、字符串函数

  • to-upper-case(str)：返回字符大写形式的参数值
  • to-lower-case(str)：返回字符小写形式的参数值
  • str-length(str)：返回字符串长度
  • str-index(str1, str2)：返回str2字符串相对于str1的索引值，索引值从1开始
  • str-insert(str1, str2, index)：向str1指定的索引值index处插入str2
to-upper-case('hello world') //HELLO WORLD
to-lower-case('HELLO WORLD') //hello world
str-length('hello world') //11
str-index('hello world', 'hello') //1,索引值从1开始
str-index('hello world', 'world') //7
str-insert('hello world', '!', 12) //hello world!

8.3、颜色函数

  • lighten(color, percent)：降低颜色
  • darken(color, percent)：加深颜色
  • opacify(str)：加大透明度
  • transparentize(str1, str2)：降低透明度

8.4、列表函数

  • length(list)：返回列表list的长度
  • nth(list, index)：返回列表指定索引index处相应的值，索引值从1开始
  • index(list, item)：返回列表指定值item处相应的索引值，索引值从1开始
  • append(list, item)：向list结尾添加指定的item值
  • join(list1, list2, type)：将多个列表list合并，并可以指定list合并的分割类型type
length(5px 10px) //2
nth(5px 10px, 1) //5px
index(5px 10px, 10px) //2
append(5px 10px, 10px) //5px 10px 10px
join(5px 10px, 10px 0, coma) //5px,10px,10px,0

8.5、map相关函数

  • map-get(map, key)：返回map中指定key对应的value值
  • map-keys(map)：以数组的形式返回map中所有的key值
  • map-values(map)：以数组的形式返回map中所有的value值
  • map-has-key(map, key)：判断map中是否包含指定的key
  • map-merge(map1, map2, ...)：将多个map合并
  • map-remove(map, key)：删除map中指定的key项
$color: (light: white, dark: black);

map-get($color, light) //white
map-keys($color) //('light', 'dark')
map-values($color) //('white', 'black')
map-has-key($color, light) //true
map-has-key($color, gray) //false
map-merge($color, (light-gray: gray)) //(light: white, dark: black, light-gray: gray)
map-remove($color, light) //(dark: black)

九、Interpolation插值

Sass中的插值可以在选择器或属性名中使用变量来表示。

插值语句格式：

#{变量名}

具体例子如下：

$type: 'info';
$attr: 'font';

.alert-#{$type} {
   #{$attr}-size: 16px;
}

上面的Sass代码将被编译为如下的Css代码：

.alert-info {
   font-size: 16px;
}

十、控制指令Control Directives

Sass提供了@if、@for等一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。

10.1、@if

@if类似于JavaScript中的if条件语句，当条件成立，输出{}代码内的代码。@if格式如下：

@if 条件 {
    ...
}

具体例子如下：

$text-color: red;

.nav {
    @if $text-color == red {
        font-size: 16px;
    } @else if $text-color == bule {
        font-size: 12px;
    } @else {
        font-size: 10px;
    }
}

上面的Sass代码将被编译为如下的Css代码：

.nav {
    font-size: 16px;
}

10.2、@for

@if类似于JavaScript中的for循环语句，可以在限制的范围内重复输出格式，其有两种格式：@for $var from <start> through <end>以及@for $var from <start> to <end>，区别在于through与to 的含义：当使用through时，条件范围包含 <start>与<end>的值，而使用 to 时条件范围只包含 <start>的值不包含 <end>的值。

应用@for $var from <start> through <end>具体例子如下：

$columns: 4;

@for $i from 1 through $columns {
    .col-#{$i} {
        width: 100% / $i
    }
}

上面的Sass代码将被编译为如下的Css代码：

.col-1 {
    width: 100%;
}

.col-2 {
    width: 50%;
}

.col-3 {
    width: 33.3333333%;
}

.col-4 {
    width: 25%;
}

应用@for $var from <start> to <end>具体例子如下：

$columns: 4;

@for $i from 1 to $columns {
    .col-#{$i} {
        width: 100% / $i
    }
}

上面的Sass代码将被编译为如下的Css代码：

.col-1 {
    width: 100%;
}

.col-2 {
    width: 50%;
}

.col-3 {
    width: 33.3333333%;
}

10.3、@each

@each用于遍历变量列表中的每一个项目，其格式如下：

@each 变量 in list {
    ...
}

具体例子如下：

$types: success info error;

@each $type in $types {
    .#{$type}-button: url(images/icons/#{$type}.jpg);
}

上面的Sass代码将被编译为如下的Css代码：

.success-button: url(images/icons/success.jpg);

.info-button: url(images/icons/info.jpg);

.error-button: url(images/icons/error.jpg);

10.4、@while

@while指令重复输出格式直到表达式返回结果为false，一般要有结束值。其格式如下：

@while 条件 {
    
}

具体例子如下：

$index: 3;

@while $index > 0 {
    .item-#{$index} {
        width: 20px * $index;
    }
    $index: $index - 1;
}

上面的Sass代码将被编译为如下的Css代码：

.item-3 {
    width: 60px;
}

.item-2 {
    width: 40px;
}

.item-1 {
    width: 20px;
}

十一、自定义函数@function

Sass支持自定义函数，函数使用@function作为声明标识符，与mixin 相同，自定义函数也可以传递若干个全局变量作为参数。一个函数可以含有多条语句，需要调用 @return输出结果。

自定义函数格式如下：

@function 名称 (参数1, 参数2) {
    ...
}

具体例子如下：

$text-color: (light: #fff, dark: #000);

@function textColor ($key) {
    @return map-get($text-color, $key)
}

.nav {
    color: textColor(light);
}

上面的Sass代码将被编译为如下的Css代码：

.nav {
   color: #fff;
}

十二、警告(warn)、错误(error)函数

Sass中还内置了警告和错误函数，用于进行异常处理，方便显示错误信息。

警告和错误函数格式如下：

@warn 参数;
@error 参数;

具体例子如下：

$text-color: (light: #fff, dark: #000);

@function textColor ($key) {
    @if not map-has-key($text-color, $key) {
        @error '$text-color没有#{$key}属性！'  
    }
    @return map-get($text-color, $key)
}

.nav {
    color: textColor(gray);
}

运行后，我们会发现控制台会显示错误信息：'$text-color没有gray属性！'

avatar
文章
阅读
粉丝