SASS 基本使用

原创
2017/01/15 22:57
阅读数 204

啥是SASS,官方说Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. 比较高调,意思是说Sass是世界上最成熟、稳定和强大的专业级CSS扩展语言。

概述

学过CSS的人都知道,它不是一种编程语言。在写css的时候,css只能是一行单纯的描述,写起来一板一眼,简单明确(因为css不算计算机语言), 当项目稍微变大,又或者,这个项目要经常改动的时候,css文件就会变得混乱不堪,这时候牛人为啥叫牛人就被体现出来了,他们把编程语言融入到css中,搞了一个被叫做"CSS预处理器"(css preprocessor)。它的基本思想是,用一种专门的编程语言,进行网页样式设计,然后再编译成正常的CSS文件。一开始我觉得这是多此一举,但是为了迎合潮流就学习了,之后才感觉到这是css的进步,犹如jQuery对于JavaScript。(和牛人的差距太大)

Sass 是众多CSS预处理器中的一种

安装和使用

安装

Sass语言使用Ruby写的,但是也有node版本的 首要安装node环境

    #局部安装
    npm install node-sass --save-dev 
    #全局安装
    npm install node-sass -g

使用

node-sass支持Nodejs API的方式编译sass文件,应用在gulp,webpack等等(不做介绍自行查看官方文档)

Command Line Interface(命令行接口)

    #命令行接口
    node-sass [options] <input> [output]

Options:

    -w, --watch                Watch a directory or file
    -r, --recursive            Recursively watch directories or files
    -o, --output               Output directory
    -x, --omit-source-map-url  Omit source map URL comment from output
    -i, --indented-syntax      Treat data from stdin as sass code (versus scss)
    -q, --quiet                Suppress log output except on error
    -v, --version              Prints version info
    --output-style             CSS output style (nested | expanded | compact | compressed)
    --indent-type              Indent type for output CSS (space | tab)
    --indent-width             Indent width; number of spaces or tabs (maximum value: 10)
    --linefeed                 Linefeed style (cr | crlf | lf | lfcr)
    --source-comments          Include debug info in output
    --source-map               Emit source map
    --source-map-contents      Embed include contents in map
    --source-map-embed         Embed sourceMappingUrl as data URI
    --source-map-root          Base path, will be emitted in source-map as is
    --include-path             Path to look for imported files
    --follow                   Follow symlinked directories
    --precision                The amount of precision allowed in decimal numbers
    --error-bell               Output a bell character on errors
    --importer                 Path to .js file containing custom importer
    --functions                Path to .js file containing custom functions
    --help                     Print usage info

Example:

    node-sass src/style.scss dest/style.css
    #监听文件变动
    node-sass --watch src/style.scss dest/style.css

基本用法

Sass 有两种语法。 第一种被称为 SCSS (Sassy CSS),是一个 CSS3 语法的扩充版本,下面都使用此语法。 也就是说,所有符合 CSS3 语法的样式表也都是具有相同语法意义的 SCSS 文件。 另外,SCSS 理解大多数 CSS hacks 以及浏览器专属语法,例如IE 古老的 filter 语法。 这种语种语法的样式表文件需要以 .scss 扩展名。

第二种是缩排语法(或者就称为 "Sass"), 提供了一种更简洁的 CSS 书写方式。 它不使用花括号,而是通过缩排的方式来表达选择符的嵌套层级,而且也不使用分号,而是用换行符来分隔属性。 很多人认为这种格式比 SCSS 更容易阅读,书写也更快速。 缩排语法具有 Sass 的所有特色功能, 虽然有些语法上稍有差异; 这些差异在{file:INDENTED_SYNTAX.md 所排语法参考手册}中都有描述。 使用此种语法的样式表文件需要以 .sass 作为扩展名。

注释

SASS共有两种注释风格。

  1. 标准的CSS注释 /* code */ ,会保留到编译后的文件。 在/*! code */,表示这是"重要注释"。即使是压缩模式编译,也会保留这行注释,通常可以用于声明版权信息。
  2. 单行注释 // code,只保留在SASS源文件中,编译后被省略。

变量

SASS所有变量以$开头。

$blue : #1875e7; 
div {
  color : $blue;
}

变量拼接必须写在#{}之中。

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

计算

body {
  margin: (14px/2);
  top: 50px + 100px;
}

嵌套

// 选择器嵌套
// css code
div h1 {
  color: red;
}
// 可以写成
div {
    h1 {
        color: red;
    }
}

// 属性也可以嵌套
// css code
div {
    border-color: red;
}
// 可以写成(注意border后面必须加":")
div {
    border: {
        color: red;
    }
}

//在嵌套的代码块内,可以使用&引用父元素
//css code
a:hover {
    color: #ffb3ff;
}
// 可以写成
a {
  &:hover { color: #ffb3ff; }
}

自定义函数

SASS允许用户编写自己的函数。

@function double($n) {
  @return $n * 2;
}
#sidebar {
  width: double(5px);
}

@规则指令(方便代码重用)

@extend 继承

SASS允许一个选择器,继承另一个选择器

.one {
  border: 1px solid #ddd;
}
// two选择器继承one

.two {
    @extend .one;
    color: red;
}

@mixin 重用代码块

@include调用代码块

Mixin有点像C语言的宏(macro),是可以重用的代码块。 使用@mixin命令,定义一个代码块。

@mixin left() {
    float: left;
    margin-left: 10px;
}
// 使用@include命令,调用这个mixin
div {
    @include left;
}

//mixin的强大之处,在于可以指定参数和缺省值
@mixin right($value: 10px) {
  float: right;
  margin-right: $value;
}

div {
  @include left(20px);
}

@import 插入文件

// 用来插入外部文件
@import "src/test.scss"

// 如果插入的是.css文件,则等同于css import
@import "src/test.css"

@控制指令

条件语句

@if可以用来判断

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

// 还有@else指令
p {
    @if lightness($color) > 30% {
    background-color: #000;
  } @else {
    background-color: #fff;
  }
}

循环语句

SASS支持for循环:

@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 $member in a, b, c, d {
  .#{$member} {
    background-image: url("/image/#{$member}.jpg");
  }
}

参考链接

SASS用法指南

展开阅读全文
加载中
点击引领话题📣 发布并加入讨论🔥
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部