MENU

Sass 入门指南

June 1, 2017 • Read: 1585 • Codes

CSS不是一种编程语言,你可以用它开发网页样式,但是没法用它编程。也就是说,CSS基本上是设计师的工具,不是程序员的工具。再程序员眼里,CSS 是一件很麻烦的东西。它没有变量,也没有条件语句,只是一行行单纯的描述,写起来相当费事。

Sass是一种CSS预处理器。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。

安装

SassRuby语言写的,但是两者的语法没有关系。所以要先安装 Ruby。官网建议安装 2.2.X 版本。

安装好后,找到RubyCommand, 或Terminal,打开输入 gem install sass

Install Sass

查看是否安装成功,输入sass -v,如果返回一个版本信息,说明安装成功。

Sass Version

维护Sass的团队会不断的添加新的功能,输入gem update sass就会更新到最新版。

Sass Uninstall

出现该图表示是最新版本。

需要卸载删除Sass的话输入gem uninstall sass就可以了,这里就不截图了。

使用

sass 有两种后缀文件名:一种为sass,该后缀在书写时不使用大括号和分号;另一种是scss文件,这种和我们平时写的 css 文件格式差不多,使用大括号和分号。这里主要讲scss,因为带括号和分号的写法看着更为舒服,sass后缀有严格的格式要求,极易报错。

最后引入页面<link>的还是 CSS 文件,这时候就需要把 scss 编译成 css 文件,我选择的是 PhpStorm/WebStorm 的 File Watcher 功能,如何使用这里就不详细说了。

基本语法

变量

SASS 允许使用变量,所有变量以 $ 开头。

$nav-color: #F90;
nav {
    $width: 100px;
    width: $width;
    color: $nav-color;
}

//编译后

nav {
    width: 100px;
    color: #F90;
}

在声明变量时,变量值也可以引用其他变量。

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
    border: $highlight-border;
}

//编译后

.selected {
    border: 1px solid #F90;
}

变量需要镶嵌在字符串之中,就必须需要写在#{}之中。

$side: left;
.rounded {
    border-#{$side}-radius: 5px;
}

Sass中的中划线和下划线相互兼容,也就是说$highlight-color$highlight_color是一样的。

计算功能

Sass允许在代码中使用算式:

body {
    margin: (14px/2);
    top: 50px + 100px;
    right: $var * 10%;
}
嵌套

Sass允许在选择器嵌套。比如,下面的CSS代码:

div h1 {
    color : red;
}

可以写成:

div {
    h1 {
        color: red;
    }
}

属性也可以嵌套,比如 border-color 属性,可以写成:

p {
    border: {
        color: red;
    }
}

属性进行嵌套也可以减少很多重复性的工作,这里需要注意border后必须加上冒号。

在嵌套类似于:hover的伪类时,要在前加上父选择器标识符&:

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

同时父选择器标识符还有另外一种用法,你可以在父选择器标识符之前添加选择器:

#content aside {
    color: red;
    body.ie & { color: green }
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }
注释

有两种注释。一种是标准的CSS注释/* 注释 */,该注释会保留到编译后的文件。另一种时单行注释// 注释,只保留在Sass源文件中,编译后会被省略。

代码的重用

继承

Sass允许一个选择器,继承另一个选择器。比如,现有class1

.class1 {
    border: 1px solid #ddd;
}

class2要继承class1,就要使用@extend命令:

.class2 {
    @extend .class1;
    font-size:120%;
}
Mixin(混合器)

使用@mixin命令,定义一个代码块:

@mixin rounded-corners {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

使用@include, 调用这个 mixin 定义的代码块。

notice {
    background-color: green;
    border: 2px solid #00aa00;
    @include rounded-corners;
}

//sass最终生成:

.notice {
    background-color: green;
    border: 2px solid #00aa00;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

混合器还可以传参数:

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

@include调用混合器时,你可以把它当作一个css函数来传参:

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

//Sass最终生成的是:

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

插入文件

@import命令,用来插入外部文件。

@import "path/filename.scss";

默认变量值

一般情况下,你反复声明一个变量,只有最后一处声明有效且它会覆盖前边的值:

$link-color: blue;
$link-color: red;
a {
    color: $link-color;
}

//编译后

a {
    color: red;
}

在有些时候,你通过@import导入Sass文件作为默认样式,但是你想不通过覆盖的方法修改这个默认值,这个时候就要时候!default。它很像css属性中!important标签的对立面,不同的是!default用于变量,含义是:如果这个变量被声明赋值了,那就用它声明的值,否则就用这个默认值。

转自 Sass 入门指南SASS 中文网SASS 用法指南

Tags: CSS, Sass
Archives QR Code Tip
QR Code for this page
Tipping QR Code
Leave a Comment

已有 9 条评论
  1. 大哥,在程序员眼里的在打错了

  2. 还有跳出嵌套@at-root,刚好最近在学,在大佬这看到逛下@(捂嘴笑)

    1. @不才膜拜大佬@(捂嘴笑)

  3. 其它的都看不懂,就觉得图片阴影有些大φ( ̄∇ ̄o)

  4. 好厉害的样子#(期待)

    1. @Jerome你个水货@(黑线)

    2. @HranInteresting,you'er being stared at

  5. @(呀咩爹) 不明觉厉

    1. @落叶大大大佬又说笑了@(呵呵)