sass基础

作者: 夏晶晶绿 | 来源:发表于2017-09-01 11:27 被阅读42次

一、相关网站地址

Sass官网：http://sass-lang.com/；
Sass中文网：https://www.sass.hk/；
Sass入门指南：http://www.w3cplus.com/sassguide/。

二、关于Sass

定义

CSS并不能算是一门真正意义上的“编程”语言，它本身无法未完成像其它编程语言一样的嵌套、继承、设置变量等工作。为了解决CSS的不足，开发者们想到了编写一种对CSS进行预处理的“中间语言”，可以实现一些“编程”语言才有的功能，然后自动编译成CSS供浏览识别，这样一定程度上弥补了CSS的不足，也无需一种新的语言来代替CSS以供浏览器识别。于是CSS预处理语言SASS（Syntactically Awesome StyleSheets）就应运而生了。
Sass在CSS的基础上，引入了变量、嵌套、mixin（混合）、运算以及函数等功能，增加了代码的灵活性，以更少的代码实现同样的效果，而且代码的整洁度、可读性更强。
作为CSS预处理器，不仅仅只有Sass一种，主流的还有LESS和Stylus。但是Sass在三者中的历史最久，功能大而全，也吸收其他两者的优点，而且由于Scss完全向下兼容普通的CSS代码，Sass的使用者比例更高一些。
大体来说，使用Sass分3步：

安装Sass；
编译Sass文件成CSS文件；
在项目中引用CSS文件的路径；

文件格式

Sass有两种后缀名文件：.sass和.scss。在同一个项目中，两种格式文件可以共存（不建议，最好统一为一种格式），但二者有各自的特点：

.sass后缀的文件：使用类Ruby的语法，格式为空格缩进式，没有花括号，靠换行区分不同属性，格式要求比较严格。
.scss后缀的文件：Sass3引入的新语法，基本写法与CSS大致相同，更易于学习。

三、安装

Sass是基于Ruby编写，所以安装Sass分2步：先安装Ruby的环境，再安装Sass。

Ruby安装

Window去Ruby官网http://rubyinstaller.org/downloads下载相应版本（注:mac下自带Ruby无需再安装Ruby!）

ruby下载

安装的时候，选中Add Ruby executables to your PATH这个选项（不选中，就会出现编译时找不到Ruby环境的情况）

image.png

完成后测试Ruby是否安装成功，命令行输入以下命令

ruby -v  
//如安装成功会打印
ruby 2.2.2p95 (2015-04-13 revision 50295) [i386-mingw32]

Sass安装

安装ruby成功之后，在开始菜单中，找到刚才我们安装的ruby，打开Start Command Prompt with Ruby

image.png

然后直接在命令行中输入

gem install sass    #安装

按回车键确认，等待一段时间就会提示你sass安装成功。如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略

淘宝RubyGems镜像安装

通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，检查更换成功后再执行gem install sass，最后查看版本。
常用命令：安装 gem install sass；查看Sass版本 sass –v；更新Sass版本 gem update sass；卸载（删除）Sass gem uninstall sass

gem sources --remove  #移除自带源
gem sources –a https://gems.ruby-china.org/  #安装RubyChina的源
gem sources –l   #查看当前的源
gem install sass    #安装
sass –v      #查看当前的版本

四、编译

Sass编译方式大概有三种：命令行编译（基础方法），GUI可视化图形编译及自动化编译

命令编译

单文件转换命令

sass style.scss style.css
#把名为style的Sass文件转换为CSS文件。
#文件每次有更新保存之后，都需要执行这个命令。

Sass 提供4种编译风格

sass --style nested style.sass style.css       #嵌套缩进的css代码，它是默认值
sass --style expanded style.sass style.css     #没有缩进的、扩展的css代码。
sass --style compact style.sass style.css      #简洁格式的css代码
sass --style compressed style.sass style.css   #压缩后的css代码。

单文件监听命令（添加--watch命令）

sass --watch style.scss:style.css
#  --watch 参数加上之后，可以监测style这个文件的变化，更新保存后自动编译。

多文件（文件夹）监听命令

sass --watch sass/main:dist/css
#监视sass目录下main文件夹中的所有Sass文件，自动编译为CSS文件之后，放到dist/css目录下。

GUI编译工具

对于 GUI 界面编译工具，目前较为流行的主要有：Koala ( http://koala-app.com/ )，Compass.app（http://compass.kkbox.com/），Scout（http://mhs.github.io/scout-app/），CodeKit（https://incident57.com/codekit/index.html），Prepros（https://prepros.io/），推荐使用Koala或CodeKit

自动化编译

可以通过webstorm、Sublime等编辑器的相关插件实现，也可以借助Grunt、Gulp等自动化构建工具来配置。以下为配置webstorm中的Sass，其他这里不研究。
在webstorm中settings中搜索file watchers工具，在此工具中添加一个SCSS的watcher，按照下图设置各项。点击ok，这样webstorm中Scss就配置好了。

配置scss

同样的再添加Sass的watcher，按照下图设置各项

配置sass

五、基本用法及常用语法（注：以下有关案例都是.scss文件的编写格式）

导入Sass文件

@import命令，用来插入外部文件，使用Sass的@import规则并不需要指明被导入文件的全名。可以省略.sass或.scss文件后缀（见下图）, Sass的@import也支持导入CSS文件。那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。如果导入CSS文件，则必须写.css后缀。

@import ‘partial’;   //导入名为“partial.scss”的文件
@import ‘toolbar.css’;  //导入名为“toolbar.css”的文件

注释

Sass注释包括三中注释风格：// 注释、/* 注释 */ 、/*! 注释 */

// 注释：单行注释（也称静默注释），编译后消失，只存在Sass文件中。
/* 注释 */：标准CSS注释，会保留到编译后的文件中。
/*! 注释 */：重要注释，即使是压缩模式编译，也会保留此注释，常用于声明版权信息。

SassScript

在CSS属性的基础上Sass提供了一些名为 SassScript的新功能。SassScript可作用于任何属性，允许属性使用变量、算数运算等额外功能。
3.1 变量
变量定义以$ 开头，赋值方法与CSS属性的写法一样，默认变量，在值后面加入!default即可。

$width: 5em;
$width: 10rem !default;
#main {
  width: $width;
}
//编译后
#main { 
  width: 5em; 
}

变量调用还有另外一种方式：这种方式是将变量嵌套在字符串中，使用#{}

$left: left;
body {
  margin-#{$left}: 10px;
}
//编译后
body {
  margin-left: 10px;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量添加 !global 即可。

#main {
  $width: 5em  !global;
  width: $width;
}
#sidebar {
  width: $width;
}
//编译后
#main { 
  width: 5em; 
}
 #sidebar { 
  width: 5em; 
}

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

数字：1, 2, 13, 10px
字符串：有引号字符串和无引号字符串，“foo”,‘bar’,baz
颜色：red，#cc6699，#888，rgba(255,255,255,0.5)
布尔型：true，false
空值：null
数组（list）：用空格或者逗号做分割符，10px 15px 0 0，(5px 10px) (20px 30px)
maps：相当于JavaScript的object，(key1: value1, key2: value2)

3.3 运算
Sass具有运算的特性，支持加减乘除及取整运算 +, -, *, /, %，关系运算 <, >, <=, >= ，相等运算 ==, != 等, 注意运算符前后各留一个空格。

$colsNum：12;          //列的个数
$colsWidth: 60px;       //一列的宽度
$gap: 5px;             //列之间的间隙
$rowWidth: $colsNum * $colsWidth + ($colsNum – 1) * $gap;     //一行的总宽度
.row {
  width: $rowWidth;
}
//编译后
.row {
  width: 775px;
}

嵌套

Sass支持选择器及属性嵌套，可以避免代码的重复书写。
4.1 选择器嵌套
由于CSS是从右向左解析，层级过多影响浏览器引擎解析效率，所以尽量避免嵌套层级过多，一般推荐嵌套不超过三层。

div {
  h1 {
    color：#333;
  }
  p {
      margin-bottom: 14px;
    a {
        color: #999;
    }
   }
}
//编译后
div h1 { color: #333;}
div p { margin-bottom: 14px;}
div p a { color: #999;}

大多数情况下上面那种简单的嵌套都没问题。但如果要在嵌套的选择器里边应用一个类似于：hover的伪类，就需要用到 & 这个连接父选择器的标识符
4.2 属性嵌套

div {
    border: {
    style: solid;
        width: 1px;
        color: #ccc;
    }
}
//编译后
div {
    border-style: solid;
    border-width: 1px;
    border-color: #ccc;
}

div {
    border: 1px solid #ccc {
      left：0;
      right: 0;
    }
}
//编译后
div {
    border: 1px solid #ccc;
    border-left: 0;
    border-right: 0;
}

继承

Sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

.class1 {
    border: 1px solid #333;
}
.class2 {
    @extend .class1;
    background-color: #999;
}
//编译后
.class1, .class2 {
    border: 1px solid #333;
}
.class2 {
    bakground-color：#999;
}

如上示例，.class2不仅会继承.class1自身的所有样式，也会继承任何跟.class1有关的组合选择器样式，如下：

.class1 {
    border: 1px solid #333;
}
.class1 a{
    color: red;
}
.class2 {
    @extend .class1;
}

//编译后

.class1, .class2 {
    border: 1px solid #333;
}
.class1 a, .class2 a{
    color: red;
}

Mixin

Sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过 @include+mixin名称来调用。

无参数mixin声明及调用：

@mixin mixName {
    float: left;
    margin-left: 10px;
}
div {
    @include mixName;
}
//编译后
div {
    float: left;
    margin-left: 10px;
}

带参数mixin声明及调用
可以不给参数值直接写参数，如果给了值的话，就是参数的默认值，在调用的时候传入其他值就会把默认值覆盖掉。

@mixin left($value: 10px){
    float: left;
    margin-left: $value;
}
div {
    @include left(66px);
}
//编译后
div {
    float: left;
    margin-left: 66px;
}

带多组数值参数的mixin声明及调用

@mixin rounded($vert,$horz,$radius: 10px){
    border-#{$vert}-#{$horz}-radius: $radius;
    -moz-border-radius -#{$vert}#{$horz}: $radius;
    -webkit- border-#{$vert}-#{$horz}-radius: $radius;
}
#nav li {
    @include rounded(top,left);
}
#footer {
    @include rounded(top,left,5px);
}
//编译后
#nav li{
    border-top-left-radius: 10px;
    -moz-border-radius -topleft: 10px;
    -webkit-border-top-left-radius: 10px;
}
#footer {
    border-top-left-radius: 5px;
    -moz-border-radius -topleft: 5px;
    -webkit-border-top-left-radius: 5px;
}

颜色函数

7.1 RGB颜色函数

rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
red($color)：从一个颜色中获取其中红色值；
green($color)：从一个颜色中获取其中绿色值；
blue($color)：从一个颜色中获取其中蓝色值；
mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

7.2 HSL颜色函数

hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
hue($color)：从一个颜色中获取色相（hue）值；
saturation($color)：从一个颜色中获取饱和度（saturation）值；
lightness($color)：从一个颜色中获取亮度（lightness）值；
adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
invert($color)：返回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

7.3 Opacity 函数

alpha($color) / opacity($color)：获取颜色的alpha分量（不透明度）；
rgba($color, $alpha)：更改颜色透明度；
opacify($color, $amount) / fade-in($color, $amount)：让颜色更不透明；
transparentize($color, $amount) / fade-out($color, $amount)：让颜色更透明。

7.4 其他颜色函数

adjust-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])：增加或减少一个或多个颜色成分；
scale-color($color, [$red], [$green], [$blue], [$saturation], [$lightness], [$alpha])：流畅颜色的一个或多个属性；
change-color($color, [$red], [$green], [$blue], [$hue], [$saturation], [$lightness], [$alpha])：改变颜色的一个或多个属性；
ie-hex-str($color)：将颜色转化为IE识别的格式。

lighten(#cc3, 10%)  // #d6d65c   变亮
darken(#c33, 10%)   // #a3a329   变暗
grayscale(#cc3)     // #808080  变灰
complement(#cc3)    // #33c     补充色

六、高级用法

条件语句

当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码，@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：

p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
$type: warning;
.msg {
    @if type == success {
        color: green;
} @else if type == warning {
    color: yellow;
} @else if type ==danger {
    color: red;
} @else {
    color: black;
}
}
//编译为
p {
    border: 1px solid; }
.msg {
    color: yellow; }

三目判断
语法为：if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值

a {
    color: if(true, red, black);
    font-size: if(false, 12px, 16px);
}
//编译后
a {
color: red; 
font-size: 16px; }

循环语句

2.1 @for
这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与to的含义：当使用through时，条件范围包含 <start> 与 <end> 的值，而使用to时条件范围只包含<start>的值不包含<end>的值。另外，$var可以是任何变量，比如$i；<start>和<end>必须是整数值

@for $i from 1 to 3 {
  .item-#{$i} {width: 2rem * $i}
}
@for $i from 1 through 3 {
  .tab-#{$i} {width: 2rem * $i;}
}
//编译为
.item-1 {
  width: 2rem; }
.item-2 {
  width: 4rem; }
.tab-1 {
  width: 2rem; }
.tab-2 {
  width: 4rem; }
.tab-3 {
  width: 6rem; }

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

$i: 6;
@while $i>0 {
  .item-#{$i} {width: 2rem * $i;}
  $i: $i – 2;
}
//编译为
.item-6 {
  width: 12rem; }
.item-4 {
  width: 8rem; }
.item-2 {
  width: 4rem; }

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

单字段list数据循环

@each $animal in tiger, lion, monkey, elephant {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//编译为
.tiger-icon {
  background-image: url('/images/tiger.png'); }
.lion-icon {
  background-image: url('/images/lion.png'); }
.monkey-icon {
  background-image: url('/images/monkey.png'); }
.elephant-icon {
  background-image: url('/images/elephant.png'); }

多字段list数据循环

$fruit-data: (apple, red, default),(lemon, yellow, pointer);
@each $fruit, $color, $cursor in $fruit-data {
  #{fruit}-icon {
    background-image: url('/images/#{$fruit }.png');
    color: $color;
    cursor: $cursor;
  }
}
//编译为
.apple-icon {
  background-image: url('/images/apple.png');
  color: red;
  cursor: default; }
.lemon-icon {
  background-image: url('/images/lemon.png');
  color: yellow;
  cursor: pointer; }

多字段map数据循环

$headings: (h1: 2rem, h2: 1.5rem, h3: 1.2rem);
@each $header, $size in $headings {
    #{$header}: {
    font-size: $size;
  }
}
//编译为
h1 {
  font-size: 2rem; }
h2 {
  font-size: 1.5rem; }
h3 {
  font-size: 1.2rem; }

自定义函数

Sass定义了很多内置函数，如上边提到的颜色函数，同时也支持自定义函数，以@function开始。

$grid-width: 40px; 
$gutter-width: 10px;
@function grid-width($n) { 
  @return $n * $grid-width + ($n - 1) * $gutter-width; 
} 
#sidebar { 
  width: grid-width(5); //或者写成 width: grid-width($n: 5)
}
//编译为
#sidebar {
  width: 240px; }

sass基础

一、相关网站地址

二、关于Sass

定义

文件格式

三、安装

Ruby安装

Sass安装

淘宝RubyGems镜像安装

四、编译

命令编译

GUI编译工具

自动化编译

五、基本用法及常用语法（注：以下有关案例都是.scss文件的编写格式）

导入Sass文件

注释

SassScript

嵌套

继承

Mixin

颜色函数

六、高级用法

条件语句

循环语句

自定义函数

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读