前端学习之路——scss篇

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

2024-09-17 13:56:32 219人阅读

学习资料：

　　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篇

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

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