首页 专题 H5案例 前端导航 UI框架

Sass 快速入门

阅读 2312 评论 0
由于工作需要,最近在使用Ionic3 + Angular4,发现使用CLI创建的新项目里对于CSS样式都是使用Sass,所以学习了一下Sass。这里主要记录了Sass的主要用法,省得每次使用都去翻官网。

Sass是什么?
Sass 是一款强化 CSS 的辅助工具,它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。

简易安装
Sass是Ruby语言写的,要安装Sass,必须先安装Ruby,当然,并不要求你会Ruby。 如果你已经安装好了Ruby,接下来就可以安装Sass:

gem install sass

注:sass文件的后缀名是.scss.sass,博主使用.scss。当然,除了Sass的语法,代码里面也可以直接使用CSS语法。 确认是否安装:

sass -v

如果安装成功,会打印出版本信息:

Sass 3.4.23


编译
对于scss文件,我们最终还是要编译成css文件才能使用。 编译也很简单,只需要在终端输入下列命令:

sass input.scss output.css

input.scss是你的Sass文件,output.css是你需要输出的文件。
我们还可以实现实时自动编译:

sass --watch input.scss:output.css

这样,每次修改并保存时都会自动编译输出。 此外,你也可以监视整个文件夹的变化:

sass --watch app/sass:public/stylesheets

输出风格
sass给我们提供了四种输出风格:
  • nested: 嵌套缩进的css代码,它是默认值。
  • expanded: 标准格式的代码
  • compact: 行格式的代码
  • compressed: 压缩后的代码,一般用于生产环境
使用方法:

sass --style compressed input.scss output.css

四种输出风格对比:

div {  

  background: red;  

  p { color: blue; }  

}   


/* nested */  

div {   

  background: red; }   

div p {   

  color: blue; }   


/* expanded */  

div {   

  background: red;  

}  

div p {   

  color: blue;  

}   


/* compact */  

div { background: red; }  

div p { color: blue; }   


/* compressed */  

div{background:red}div p{color:blue}

更多帮助命令:

sass --help

基础语法
1、变量
Sass使用$美元符号来声明变量:

$blue: blue;

直接使用:

div { color: $blue; }

在Sass中,变量是有作用域的,类似ES6中的let,sass变量支持块级作用域(花括号{}包裹区域),也就是有全局变量和局部变量之分:

$blue: blue; // 全局变量  

div {   

  $blue: red; // 局部变量  

  color: $blue; // red  

}

输出为:

div {   

  color: red; }

当然,也可以使用!global将局部变量转换为全局变量:

div {   

  $red: red !global;  

  color: red;  

}  

a {  

  color: $red;  

}

输出为:

div {   

  color: red; }  

a {   

  color: red; }

注意:如果上面的red后面不加上!global,Sass会报错,你可以在终端或输出文件比如output.css里看到错误。 此外,变量也可以拼接在CSS属性里,不过要借助插值语句(#{}):

$theme: ".dark";   


#{$theme} div {  

  color: black  

}

输出为:

.dark div { color: black; }

也可以这样:

$side: top;   

div {

  border-#{$side}-color: red;

}

输出为:

div {border-top-color: red; }

注:如果传入的是字符串,插值语句输出的最终都是不带引号的字符串
2、嵌套语法
Sass允许CSS样式嵌套:

div {  

  color: black;  

  a { color: red;}  

}

输出为:

div { color: black; }  

div a { color: red; }

多层嵌套:

div {  

  p, span{  

    color:red;  

    a {font-size: 15px;}  

  }  

}

输出为:

div p, div span { color: red; }  

div p a, div span a { font-size: 15px; }

CSS中,有些属性拥有相同的命名空间,比如font-size,font-weight等,对于这些属性,我们也可以使用属性嵌套:

div {  

  font: {  

    size: 10px;  

    weight: bold;  

  }  

}

输出为:

div { font-size: 10px; font-weight: bold; }

注意font后面的冒号(:)。 此外,还可以这样:

div {  

  font: 15px {  

    size: 10px;  

    weight: bold;  

  }  

}

输出为:

div { font: 15px; font-size: 10px; font-weight: bold; }

父元素&
在Sass中,&表示父元素。

a {  

  &:hover { color: red; }  

}

输出为:

a:hover { color: red; }

当有多层嵌套样式时,&表示它所有祖先元素的拼接:

div {  

  a {  

    &:hover { color: red; }  

  }

}

输出为:

div a:hover { color: red; }

此外,&还可以作为选择器的一部分:

.main {   

  &-content { color: red; }  

}

输出为:

.main-content { color: red; }

注释
Sass提供了三种注释方式:
  • 多行注释: /* */
  • 单行注释 //
  • !多行注释: /*! */,通常用于添加版权信息
三者的区别:
  • 单行注释不会输出到CSS文件,多行注释会
  • 单行注释和多行注释不会输出到压缩CSS文件中,而!多行注释会
此外,前面提到的插值语句(#{})也可以用到多行注释中

$version: "1.0.0";  

/* 当前版本: #{$version} */

输出为:

/* 当前版本: 1.0.0 */

运算
Sass支持数字的加减乘除、取整等运算 (+, -, *, /, %) 关系运算 <, >, <=, >= 也可用于数字运算,相等运算 ==, != 可用于所有数据类型

div {   

  font-size: 10px + 10px;   

  height: 40px - 5px;   

  width: 100 % 3px; }

输出为:

div { font-size: 20px; height: 35px; width: 1px; }

注意:在进行加减乘除时,建议使用统一单位,否则就需记住哪些单位是可以转换,哪些是不可以转换的,稍不注意,Sass就会报错。
特殊的除法
由于原生CSS中的斜杠(/)是有用途的(比如定义圆角的不同半径时,border-radius: 10px/20px,表示水平半径为10px,垂直半径为20px),所以在Sass中使用时要注意,只有下面三种情况才会被视为除法运算:
  • 如果值被圆括号包裹: (20px / 10px)
  • 如果值是算数表达式的一部分: (10px + 20px / 10px)
  • 如果值的一部分是变量或函数的返回值:$width / 10
如果你想显式的让斜杠(/)不做除法运算,只需使用插值语句(#{}):

div { #{$font-size}/#{$line-height}; }

如JavaScript中的+号一样,Sass中的+号也可以连接字符串:

div { cursor: e + -resize; }

输出为:

div { cursor: e-resize; }

控制语句
1、@if
@if语句类似JavaScript中的if语句,当 @if 的表达式返回值不是 false 或者 null 时,条件成立,输出 {} 内的代码:

div {  

  @if 3 > 2 { color: red; }  

  @if null { color: black; }

}

输出为:

div { color: red; }

@if 声明后面可以跟多个 @else if 声明,或者一个 @else 声明。如果 @if 声明失败,Sass 将逐条执行 @else if 声明,如果全部失败,最后执行 @else 声明:

div {  

@if 1 > 2 {   

  color: red;  

} @else if 3 > 2 {   

  color: blue;  

} @else {   

  color: black;  

}  

}

输出为:

div { color: blue; }

注: 控制语句也可以在最外层使用.
循环语句

(1)@for
Sass的for语句与JavaScript的for语句的作用类似,但语法有所不同。

from...through..

@for $var from start through end {}

例子:

@for $i from 1 through 3 {   

  .large-#{$i} { font-size: 10px * $i; }  

}

输出:

.large-1 { font-size: 10px; }   

.large-2 { font-size: 20px; }

.large-3 { font-size: 30px; }


from...to...

@for $var from start to end {}

例子:

@for $i from 1 to 3 {   

  .large-#{$i} { font-size: 10px * $i; }  

}

输出为:

.large-1 { font-size: 10px; }   

.large-2 { font-size: 20px; }

如果你留意了上面的例子,应该可以发现throughto的区别: 当使用 through 时,条件范围包含 <start> 与 <end> 的值,而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。 注意:start和end必须是整数

@each

Sass中的数组
在Sass中,数组便是通过空格或者逗号分隔的一系列的值,比如1 2 3 4或1,2,3,4.
还可以由多维数组,比如1 2, 3 4表示包含1 2与3 4两个数组的数组,还可以这样(1 2) (3 4)

@each语句的作用与@for类似,但使用语法不同:

@each $var in <list>

<list>是一系列以逗号分隔的值列表(数组):

@each $icon in user, nav, person {   

  .#{$icon}-icon {   

    background-image: url('/images/#{$icon}.png');   

  }  

}

输出为:

.user-icon { background-image: url("/images/user.png"); }   

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

.person-icon { background-image: url("/images/person.png"); }

对于多维数组:

@each $var1, $var2 in ($value,$value), ($value,$value)

例子:

@each $font, $size in (large-1, 10px), (large-2, 20px) {   

  .#{$font} {   

    font-size: $size;   

  }  

}

输出为:

.large-1 { font-size: 10px; }   

.large-2 { font-size: 20px; }

对于元素是键值对形式的数组:

@each $key, $value in (key: value, key: value)

例子:

@each $selector, $size in (div: 10px, p: 20px) {   

  #{$selector} {   

    font-size: $size;   

  }  

}

输出为:

div { font-size: 10px; }   

p { font-size: 20px; }

@while
@while 指令重复输出格式直到表达式返回结果为 false:

$i: 6;  

@while $i > 0 {   

  .item-#{$i} { width: 2em * $i; }   

  $i: $i - 2;  

}

代码重用(Mixin和extend)
(1)Mixin
Mixin使用@mixin语句来定义需要重复使用的代码,比如说清除浮动:

@mixin clearfix {   

  &:after {  

    content: "";  

    display: block;  

    height: 0;  

    clear: both;  

    visibility: hidden;  

  }  

}

使用@include语句来使用Mixin定义的代码:

div { @include clearfix; }

输出为:

div:after { content: ""; display: block; height: 0; clear: both; visibility: hidden; }

@mixin语句还可以带参数参数默认值

@mixin text-font($size, $weight, $color: black) {   

  font: {  

    size: $size;  

    weight: $weight;  

  }  

  color: $color;  

}   

p { @include text-font(10px, bold); }

输出为:

p { font-size: 10px; font-weight: bold; color: black; }


多余参数

多余参数也可以称为不确定参数。有些CSS样式(比如box-shadow,text-shadow等)可以有多个以逗号分隔的值列表,这样在定义Mixin时我们就无法确定传入几个参数,这时就需要借助多余参数的写法($name...):

@mixin box-shadow($shadows...) {   

  box-shadow: $shadows;  

}   


div {  

  @include box-shadow(0 0 3px black, 0 0 5px red);  

}

输出为:

div { box-shadow: 0 0 3px black, 0 0 5px red; }

此外,多余参数也可以用在传参时:

@mixin colors($text, $background, $border) {   

  color: $text;   

  background-color: $background;   

  border-color: $border;  

}  

$values: #ff0000, #00ff00, #0000ff;  

.primary {   

  @include colors($values...);  

}

输出为:

.primary { color: #ff0000; background-color: #00ff00; border-color: #0000ff; }


不定序传参

不定序传参可以让你忽略形参的顺序,不必记住它们:

@mixin blue-theme($background, $color) {   

  background: $background;   

  color: $color;  

}

一般我们是如下调用:

div { @include blue-theme(red, white); }

但我们也可以忽略传参的顺序,传参时以键值对的形式传参:

div { @include blue-theme($color: white, $background: red); }

两种方式都会输出:

div { background: red; color: white; }

注意点:
  • @mixin 可以用 = 表示,而 @include 可以用 + 表示
  • @include不仅可以用在块内,也可以直接用在最外层

(2)extend
@extend语句用来实现继承:

.large {   

  font-size: 20px;  

  font-weight: bold;  

}   

.main {  

  @extend .large;  

  background: red;  

}

输出为:

.large, .main { font-size: 20px; font-weight: bold; }   

.main { background: red; }

@extend实现的继承是继承所有:

.large {   

  font-size: 20px;  

  font-weight: bold;  

}   

.large.blue {   

  color: blue;  

}   

.main {  

  @extend .large;  

  background: red;  

}

输出为:

.large, .main { font-size: 20px; font-weight: bold; }   

.large.blue, .blue.main { color: blue; }   

.main { background: red; }


函数
(1)内置函数
Sass提供了很多内置函数:函数列表

(2)自定义函数
Sass支持自定义函数,使用@function语句来声明函数:

@function large($n) {   

  @return $n * 2;  

}   

div { font-size: large(10px); }

输出为:

div { font-size: 20px; }

注:自定义函数也支持不定序传参和多余参数.

导入外部文件

类似CSS的import,Sass也支持import

@import "color.scss";

如有任何疑问或建议,欢迎在下方的评论区留言!



关注”全栈技术杂货铺“

全栈技术杂货铺