首页 > 代码库 > 前端学习之路——scss篇

前端学习之路——scss篇

学习资料:

  sass语法 http://www.w3cplus.com/sassguide/syntax.html

  Sass http://sass.bootcss.com/docs/sass-reference/

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

一、什么是SASS

SASS是一种CSS的开发工具,提供了许多便利的写法,大大节省了设计者的时间,使得CSS的开发,变得简单和可维护。

二、安装和使用

Sass依赖于ruby环境,所以装sass之前先确认装了ruby。先导官网下载个ruby。在安装的时候,请勾选Add Ruby executables to your PATH这个选项,添加环境变量,不然以后使用编译软件的时候会提示找不到ruby环境。安装好ruby后,然后安装Sass。(mac自带)

输入一下命令:

gem install sass

这样,sass就可以使用了。

三、基本使用

Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本;二种比较老的语法成为缩排语法(或者就称为 "Sass"), 提供了一种更简洁的 CSS 书写方式。使用 sass-convert 命令实现两者相互转换。本文介绍的是Scss用法。

# 将 Sass 转换为 SCSS
$ sass-convert style.sass style.scss

# 将 SCSS 转换为 Sass
$ sass-convert style.scss style.sass

3.1 注释

SASS共有两种注释风格。标准的CSS注释 /* comment */ ,会保留到编译后的文件。单行注释 // comment,只保留在SASS源文件中,编译后被省略。在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

3.2 变量

SASS可以使用变量,所有变量以$开头。如果变量需要镶嵌在字符串之中,就必须需要写在#{}之中。变量后面添加 !default ,表示该值是默认值。

$left: left;

div{
    float: $left;
    margin-#{$left}: 20px;
}

多个变量

多值变量分为list类型和map类型,简单来说list类型有点像js中的数组,而map类型有点像js中的对象。

/* list */
$linkColor:         #08c #333 !default;//第一个值为默认值,第二个鼠标滑过值
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

/* map */
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $key, $value in $headings {
  #{$key} {
    font-size: $value;
  }
}

编译为:
/* list */
a { color: #08c; }
a:hover { color: #333; }

/* map */
h1 { font-size: 2em; }
h2 { font-size: 1.5em; }
h3 { font-size: 1.2em; }

3.3 嵌套

SASS可以使用选择器嵌套。

div {
    img{
        width: 50px;
    }
}

//编译为
div img{ width: 50px; }

属性也可以嵌套,比如 border-color 属性。

div{
    border: {
        color: red;
    }
}

//编译为
div{ border-color: red; }

注意:border后面必须加上冒号

在嵌套的代码块内,可以使用 & 引用父元素。比如 a:hover 伪类。

a{
    &:hover{
        color: #ccc;
    }
}

//编译为
a:hover{ color: #ccc;}

3.4 @at-root

sass3.3.0中新增的功能,用来跳出选择器嵌套的。默认所有的嵌套,继承所有上级选择器,但有了这个就可以跳出所有上级选择器。适用 BEM 命名方式(如: .block 、.block__element 、.block--modifier)、@keyframe。先看如果使用嵌套写法是什么样的情况。

.block {
    color: red;
    #{&}_element {
        color:blue;
    }
    #{&}--modifier {
        color: orange;
    }
}

编译为
.block { color: red; }
.block .block_element { color: blue; }
.block .block--modifier { color: orange; }

明显编译出来的CSS并不是我们想要的代码。 @at-root 可以实现上面 BEM 的特性。

.block {
    color: red;
    @at-root #{&}_element {
        color:blue;
    }
    @at-root #{&}--modifier {
        color: orange;
    }
}

编译为:
.block { color: red; }
.block_element { color: blue; }
.block--modifier { color: orange; }

3.5 计算

SASS允许在代码中使用算式。这里就不做描述了。

四、代码重用

4.1 继承

SASS通过 @extend 命令使一个选择器class2继承另一个选择器class1

.class1{
    width: 50px / 2;
    height: 50px + 50px;
}
.class2{
    @extend .class1;
    height: 50px;
}

编译为:
.class1, .class2 { width: 50px / 2; height: 100px; }
.class2 { height: 50px; }

 

编译后以群组选择器方式显示;如果选择器class2不需要选择器class1的某个属性,可添加该属性进行覆盖,并单独显示出来。(看文档的时候总是将群组选择的 “,” 看成 “.”,误认为后代选择器了,所以写出来。)

4.2 Mixin

Sass中使用 @mixin 声明混合,可以传递参数,参数名以$符号开始,多个参数以逗号分开,也可以给参数设置默认值 $opacity:50 ,如果一个参数可以有多组值,如 box-shadow、transition 等,那么参数则需要在变量后加三个点表示,如 $variables... 。使用 @mixin 命令,定义一个代码块。再使用 @include 命令,调用这个 @mixin。

@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
.opacity{
  @include opacity; 
}
.opacity-80{
  @include opacity(80); 
}

编译为:
.opacity { opacity: 0.5; filter: alpha(opacity=50); }
.opacity-80 { opacity: 0.8; filter: alpha(opacity=80); }

 4.3 函数

Sass定义了很多函数可供使用,当然你也可以自定义函数,以 @fuction 开始。实际项目中我们使用最多的应该是颜色函数,而颜色函数中又以lighten减淡和darken加深为最,其调用方法为lighten($color,$amount)darken($color,$amount),它们的第一个参数都是颜色值,第二个参数都是百分比。

$color: red;
@function rem($rem){
    @return $rem / 10 + rem;
}
.box{
    foot-size: rem(20);
    color: lighten($color, 20%);
}

编译为:
.box { foot-size: 2rem; color: #ff6666; }

五、高级使用

5.1 条件语句

@if可以用来判断:

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

编译为:
p { border: 1px solid; }

@if 声明可以由几个 @else if语句,一个 @else 声明组成。

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译为:
p { color: green; }

5.2 循环语句

@for循环:from x to y: 不含y;from x through y:包含y。

@for $i from 1 to 3 {
    .border-#{$i} {
        border: #{$i}px solid blue;
    }
}

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译为:
.border-1 { border: 1px solid blue; }
.border-2 { border: 2px solid blue; }
.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }

@each

$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url(/images/#{$animal}.png);
  }
}

编译为:
.puma-icon { background-image: url("/images/puma.png"); }
.sea-slug-icon { background-image: url("/images/sea-slug.png"); }
.egret-icon { background-image: url("/images/egret.png"); }
.salamander-icon { background-image: url("/images/salamander.png"); }

@while

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

编译为:
.item-6 { width: 12em; }
.item-4 { width: 8em; }
.item-2 { width: 4em; }

六、编译

在命令行中运行 Sass 进行编译,只要输入:

sass input.scss output.css 

命令 Sass 监视文件的改动并更新 CSS :

sass --watch input.scss:output.css

如果你的目录里有很多 Sass 文件,你还可以命令 Sass 监视整个目录:

sass --watch app/sass:public/stylesheets

在命令行后面添加 --style 编译格式 可以选择编译方式。

编译方式有四种:

  nested(默认):选择器与属性等单独占用一行,缩进量与 Sass 文件中一致,每行的缩进量反映了其在嵌套规则内的层数。当阅读大型 CSS 文件时,这种样式可以很容易地分析文件的主要结构;

  expanded:选择器、属性等各占用一行,属性根据选择器缩进,而选择器不做任何缩进;

  compact:每条 CSS 规则只占一行,包含其下的所有属性。嵌套过的选择器在输出时没有空行,不嵌套的选择器会输出空白行作为分隔符;

  compressed:删除所有无意义的空格、空白行、以及注释,力求将文件体积压缩到最小,同时也会做出其他调整,比如会自动替换占用空间最小的颜色表达方式。

编译错误,命令行中会报错,并提示错误代码行数。

 

前端学习之路——scss篇