sass 入门与实战

作者: 刘星
日期: 2017年5月16日

Sass 入门与实战

**Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.**打开Sass官网就可以看见这样一句话。这话一点儿都不谦虚:Sass 世界上最成熟、最稳定、最强大的专业级 CSS 扩展语言!他如此自信想必是有各种自信的理由,下面我们就一起来了解了解 Sass,看看它在吹牛还在真的如此厉害。

css 预处理器

学过CSS的人都知道,它不是一种编程语言。网页开发离不开它,但它有发展缓慢。自然而然就有想出了解决方案:css 预处理器

CSS 预处理器是什么?一般来说,它们基于 CSS 扩展了一套属于自己的 DSL,来解决我们书写 CSS 时难以解决的问题:

  • 语法不够强大,比如无法嵌套书写导致模块化开发中需要书写很多重复的选择器;
  • 没有变量和合理的样式复用机制,使得逻辑上相关的属性值必须以字面量的形式重复输出,导致难以维护。

所以这就决定了 CSS 预处理器的主要目标:提供 CSS 缺失的样式层复用机制、减少冗余代码,提高样式代码的可维护性。这不是锦上添花,而恰恰是雪中送炭。

css 预处理器已发展多年,处理 Sass 外,还有less, Stylus

除了 css 预处理器,css 后处理器也很流行如postcss

开始使用 Sass

  • 完全兼容 CSS3

  • 在 CSS 语言基础上添加了扩展功能,比如变量、嵌套 (nesting)、混合 (mixin)

  • 对颜色和其它值进行操作的{Sass::Script::Functions 函数}

  • 函数库控制指令之类的高级功能

  • 良好的格式,可对输出格式进行定制

  • 支持 Firebug

Sass 的两种语法

Sass 有两种语法。

  • 第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本,也就是说,所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。
  • 第二种比较老的语法成为缩排语法(或者就称为 “Sass”), 提供了一种更简洁的 CSS 书写方式。 它不使用花括号,而是通过缩排的方式来表达选择符的嵌套层级,I 而且也不使用分号,而是用换行符来分隔属性。

一般使用 Scss 多余 Sass,不过二者除了上述不同外,基本在无差别,也许你和我一样,有时候写写 Python 后会突然想用 Sass,有时有钟情于 Scss,这些都无关紧要

Sass 的安装

由于 Sass 的发展,Sass 有两种实现,ruby-sass 与 lib-sass,前者采用ruby实现,后者采用C/C++实现。

  • ruby-sass

你需要先安装 ruby,不过 mac 已经自带了。然后 gem install 安装

 gem install sass

在命令行中使用如下命令编译

sass [options] <input> [output]

通常你会出错,哈哈哈,如出错请自行搜索解决

  • node-sass

不用说你也得先安装 nodeJs,不过现在的前端你不安装个 node 都不好意意思说自己是前端。

npm install --save-dev node-sass

通常你还是会出错,哈哈哈,不过用 cnpm 代替 npm 就好*

cnpm install --save-dev node-sass

在命令行中使用如下命令编译

node-sass [options] <input> [output]

node-sass 还可以编辑 nodejs 文件进行配置编译

SASS 提供四个编译风格的选项

  • nested:嵌套缩进的 css 代码,它是默认值。
  • expanded:没有缩进的、扩展的 css 代码。
  • compact:简洁格式的 css 代码。
  • compressed:压缩后的 css 代码。

最后推荐大家使用 gulp 来编译 Sass。关于 gulp 这里不多讲。下面给出一个简单 gulp 配置文件来编译 sass

const gulp = require('gulp')
const sass = require('gulp-sass')

gulp.task('sass', function () {
    return gulp.src('./sass/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('./css'))
})

gulp.task('sass:watch', function () {
    gulp.watch('./sass/**/*.scss', ['sass'])
})

具体参见GitHub

下面我们将快速学习 sass 的语法

sass 语法快速入门

基本语法

1.变量

Sass让人们受益的一个重要特性就是它为css引入了变量。你可以把反复使用的css属性值 定义成变量,然后通过变量名来引用它们,而无需重复书写这一属性值。或者,对于仅使用过一 次的属性值,你可以赋予其一个易懂的变量名,让人一眼就知道这个属性值的用途。

//scss style
//-----------------------------------
$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;

body {
  font-family: $fontStack;
  color: $primaryColor;
}
//css style
//-----------------------------------
body {
  font-family: Helvetica, sans-serif;
  color: #333;
}

2.嵌套

sass 可以进行选择器的嵌套,表示层级关系,看起来很优雅整齐。

//scss style
//-----------------------------------
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

//css style
//-----------------------------------
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

3. 计算功能

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

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

4.颜色

sass 中集成了大量的颜色函数,让变换颜色更加简单。

//scss style
//-----------------------------------
$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{ // &是父选择器的标识符
      color:darken($linkColor,10%);
    }
}

//css style
//-----------------------------------
a {
  text-decoration: none;
  color: #0088cc;
}
a:hover {
  color: #006699;
}

&是父选择器的标识符

5. 注释

Sass 共有两种注释风格。

  • 标准的 CSS 注释 /* comment */ ,会保留到编译后的文件。
  • 单行注释 // comment,只保留在 SASS 源文件中,编译后被省略。

在/*后面加一个感叹号,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。

/*! 
我是个傲娇的注释,不会被省略
*/

代码的重用

1. 导入

sass 中如导入其他 sass 文件,最后编译为一个 css 文件,优于纯 css 的@import

  • 文件的名称约定以下划线开头
  • 以下划线卡头的文件名称不会被编译
//scss style
//-----------------------------------
// _reset.scss

html,
body,
ul,
ol {
   margin: 0;
  padding: 0;
}

//scss style
//-----------------------------------
// base.scss 

@import 'reset';

body {
  font-size: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

//css style
//-----------------------------------
html, body, ul, ol {
  margin: 0;
  padding: 0;
}

body {
  background-color: #efefef;
  font-size: 100% Helvetica, sans-serif;
}

2. 扩展/继承

sass 可通过@extend来实现代码组合声明,使代码更加优越简洁。

//scss style
//-----------------------------------
.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

.error {
  @extend .message;
  border-color: red;
}

.warning {
  @extend .message;
  border-color: yellow;
}

//css style
//-----------------------------------
.message, .success, .error, .warning {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

3. mixin

sass 中可用 mixin 定义一些代码片段,且可传参数,方便日后根据需求调用。比如说处理 css3 浏览器前缀*(更好的解决方案:autoprefixer)*

//scss style
//-----------------------------------
@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}
//css style
//-----------------------------------
.box-border {
  border: 1px solid #ccc;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

mixin 的强大之处,在于可以指定参数和缺省值。

高级用法

高级用法可以翻译为“用的少”,但威力很大“

1.条件语句

@if可一个条件单独使用,也可以和@else结合多条件使用

//scss style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}

2.循环语句

SASS 支持 for 循环:

for 循环有两种形式,分别为:@for $var from <start> through <end>@for $var from <start> to <end>。$i 表示变量,start 表示起始值,end 表示结束值,这两个的区别是关键字 through 表示包括 end 这个数,而 to 则不包括 end 这个数。

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

也支持 while 循环:

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

each 命令,作用与 for 类似:

语法为:@each $var in <list or map>。其中$var表示变量,而 list 和 map 表示 list 类型数据和 map 类型数据。sass 3.3.0 新加入了多字段循环和 map 数据循环。

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

//css style
//-------------------------------
.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'); 
}

了解了上面这些内容,基本上就算入门了,再去看看这些链接:

实战

传送门: GitHub

文档信息

版权声明:署名-非商业性使用-禁止演绎 4.0 国际(CC BY-NC-ND 4.0)

原文链接:https://www.liuxing.io/blog/sass-tutorial/

发表日期:2017年05月16日


最近更新

Curl 使用指南

Curl 是一个常用的命令行数据传输工具, 可以方便的从命令行创建网络请求

2021年5月04日

JavaScript 中的分号

JavaScript 代码到底加不加分号。本文带你了解 JavaScript 的分号自动插入机制,以及哪些情况必须加分号

2021年5月02日