sass学习笔记

文章概述

本篇文章记录sass的学习笔记。

sass

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。

• 中文网

安装sass

ruby环境自带包管理工具gem下载sass：

$ gem install sass

注释

• //：这种注释方式，不会被编译到css文件中，只能保留在源文件;
• /**/： 这种注释可以被编译到css文件中;

数据类型

SassScript 支持 6 种主要的数据类型：

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

运算

数学运算

支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。

关系运算

关系运算 <, >, <=, >= 也可用于数字运算，相等运算 ==, != 可用于所有数据类型。

布尔运算

支持布尔型的 and or 以及 not 运算。

颜色值运算

• 颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值:

p {
  color: #010203 + #040506;
}

• 需要注意的是，如果颜色值包含 alpha channel（rgba 或 hsla 两种颜色值），必须拥有相等的 alpha 值才能进行运算，因为算术运算不会作用于 alpha 值。

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

字符串运算

• +可用于连接字符串;

变量

声明和使用

• Scss语法支持使用变量，变量都以$符号开头；
• 变量的赋值与css一致；
• 变量使用时，可直接将变量名赋值给css属性；
• 变量命名推荐中划线分割单词；
• 通过#{}插值语句可以在选择器、属性名、字符串中使用变量；

//定义
$font-color: #ff637c;
$sm-padding: 6px;

//使用
.main {
    color: $font-color;
    padding-top: $sm-padding;
}

变量的操作

• 直接操作变量，即变量表达式；

1. 变量表达式支持：加减乘除、>=、<=、>、<、==、!=、();
2. sass的数值计算可以带单位，但是单位不能混用；

• 通过函数操作：

1. 跟代码块无关的函数，多是内置的函数，称functions;
2. 可重用的代码块：mixin(混合器)
    1> mixin使用@include来调用；
    2> 通过@extend来调用；

变量管理

可以定义变量代表默认的一些样式，这些变量集中存储到单独的scss局部文件,文件名以下划线开头(为局部文件,编译时不会打包到单独的css文件),在使用时用@import引用此文件(引用文件时，文件名不用加下划线)。

css嵌套规则

• scss支持选择器嵌套使用,但是嵌套越深，css效率越低;
• 父选择器的标识符使用&;

//包含关系
#content {
  #contentChild { background-color: #EEE }
}

//引用父类
a {
    //嵌套伪类时，需要用&链接父类选择器；
    &:hover {
        color: red;
    }
}

//属性嵌套
.content {
  border: {
      style: solid;
      width: 1px;
      color: #ccc;
  }
  font: {
      weight: bold;
  }
}

at-root指令

防止多层选择器嵌套影响效率，可使用@at-root指令，将被修饰的选择器直接输出到当前样式表的顶层，提高了css效率。

导入外部样式文件

sass样式支持导入外部sass文件，可以使用其中的变量、样式，导入方式有：

• 导入sass文件；
• 导入局部sass文件：

- 不需要独立生成css文件的sass文件称<span style="color:red">局部sass文件</span> color，只有在使用的时候才会引入，通常使用下划线作为前缀，样式表中引用时，只用引用下划线后面的文件名即可；
- 局部sass文件：通常用来管理一些默认的样式、变量，可维护性高；

• 支持嵌套导入：即允许@import命令写在css规则内；
• 支持原生CSS文件导入：被导入文件的名字以.css结尾；

//导入sass文件: _x.scss
@import './path/x.scss';
//导入原生css样式文件：
@import './path/test.css';

//嵌套导入
.blue-theme {
    @import "blue-theme"
}

优化建议

• 使用变量管理一些默认配置样式，用单独的局部sass文件进行管理；

自定义函数

Sass支持自定义函数，并能在任何属性值或Sass script中使用，sass使用关键字@function来定义函数，使用@return关键字来返回函数的结果，如下是定义和调用的方式：

$grid-width: 40px;
$gutter-width: 10px;

//定义函数
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

//调用
//简单调用：
#sidebar { width: grid-width(5); }
//关键词调用：
#sidebar { width: grid-width($n: 5); }

mixin混合器

混合器用来封装公共的东西，提高代码质量；

概念

定义：sass使用@mixin关键字来定义混合器，关键字@include来使用混合器，@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。

混合器中不仅可以包含属性，也可以包含css规则，包含选择器和选择器中的属性;

@mixin no-bullets {
  list-style: none;
  li {
    list-style-image: none;
    list-style-type: none;
    margin-left: 0px;
  }
}

语法定义

• mixin混合器带参数时需要加括号，不带参数时不需要加；
• mixin混合器带参数时，可以设置默认值；

@mixin test(arguments){
    //语句块
}

mixin不带参数

//定义混合器
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
//使用混合器：
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

mixin带参数

//定义带参数混合器：
@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

//使用
a {
  @include link-colors(blue, red, green);
}

mixin参数默认值

@mixin link-colors($normal,$hover: $normal,$visited: $normal){
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

mixin管理

mixin常抽离到单独的文件，如_mixin.scss，来集中管理混合器；

选择器继承精简CSS

选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现,示例代码如下:

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

仅被继承选择器

使用%修饰的样式选择器，不会被编译成单独的样式，这种选择器只能被继承，

%success {
    border: 1px solid red;
    background-color: #fdd;
}
.perfectSuccess {
    @extend %success;
    border-width: 3px;
}

条件控制指令

SassScript 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用。

@if条件判断

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码，支持@else if和@else指令来辅助@if；

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

@for遍历

@for指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。

语法格式

@for指令包含两种格式：

//格式一：当使用through时，条件范围包含<start>与<end>的值；
@for $var from <start> through <end>
//格式二：使用to时条件范围只包含<start>的值不包含<end>的值；
@for $var from <start> to <end>

【注意】
> $var 可以是任何变量，比如 $i；
> <start> 和 <end> 必须是整数值。

@each遍历

@each 指令的格式是 $var in , $var 可以是任何变量名，比如 $length 或者 $name，而 是一连串的值，也就是值列表。

//@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：
@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

@while条件循环

@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

$i: 6;
@while $i > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $i - 2;
}

常用内置函数

数据类型判断

用于对数据类型判断：

//判断变量类型是number;
@if type-of($test) == number{}

单位操作

• unitless($number)：判断一个值是否不带带位；
• unit($number)：返回一个值的单位

comparable

comparable($number-1, $number-2)用来判断两个值是否可以做加、减和合并。

sass使用media query

sass中media query可以直接嵌套在css规则中，在生成css的时候，media query才会被提到样式的最高级，这样避免了重复书写选择器或者打乱样式表的流程。

参考

日志输出指令

sass提供@debug、@error、@warn来向控制台输出一段日志文字，用来表示错误信息，语法格式如下:

@warn "this is warn";