sass入门

二师弟
181 阅读7分钟

概览

Sass（CSS预处理器） 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能,可以帮助我们减少CSS重复的代码，易于组织和维护，节省了开发时间。

安装

使用 npm来安装 Sass：

npm install -g sass

安装完成后可查看版本：

sass --version

编译

对于scss文件，我们最终还是要编译成css文件才能使用。 编译也很简单，只需要在终端输入下列命令：

sass input.scss output.css //input.scss是你的Sass文件，output.css是你需要输出的文件

还可以实现实时自动编译:

sass --watch input.scss:output.css

这样，每次修改并保存时都会自动编译输出。 此外，你也可以监视整个文件夹的变化:

sass --watch app/sass:public/stylesheets

输出风格

sass给我们提供了四种输出风格：

  • nested: 嵌套缩进的css代码，它是默认值。
  • expanded: 标准格式的代码
  • compact: 行格式的代码
  • compressed: 压缩后的代码，一般用于生产环境

使用方法:

sass --style compressed input.scss output.css

更多帮助命令：

sass --help

变量

Sass变量使用 $ 符号声明变量：

$Variablesname:value;

以下实例设置了3个变量：ourFont、ourSize、ourColor

$ourFont:sans-serif;
$ourSize:8px;
$ourColor:#000;
body{
	font-family:$ourFont;
	font-size:$ourSize;
	color:$ourColr；
}

编译成CSS代码，如下所示：

body{
	font-family:sans-serif;
	font-size:8px;
	color:#000；
}

注意：Sass变量的作用域只能在当前层级上有效果，如下所示可得，h1的颜色样式为内部定义的red, h2的则是#000;

$ourColor:#000;
h1{
	$ourColor:red;
	color:$ourColor;
}
h2{
	color:$ourColor;
}

输出为：

h1{
	color:red;
}
h2{
	color:#000;
}

若需要设置变量为全局，可使用！global 关键词，如下所示：

$ourColor:#000;
h1{
	$ourColor:red !global;
	color:$ourColor;
}
h2{
	color:$ourColor;//color:red;
}

此外,变量也可以拼接在CSS属性里,不过要借助插值语句(#{}):

$theme: ".dark";   

#{$theme} div {  
  color: black  
}

输出为：

.dark div { color: black; }

也可以这样:

$side: top;   

div {
  border-#{$side}-color: red;
}

输出为：

div {border-top-color: red; }

注：如果传入的是字符串，插值语句输出的最终都是不带引号的字符串。

嵌套

Sass 嵌套 CSS 选择器类似于 HTML 的嵌套规则。假设我们有以下css代码：

nav ul{
	margin:0;
	padding:0;
	list-style;:none;
}
nav li{
	display:inline-block;
}
nav  a{
	display:block;
	padding:4px;
	 text-decoration: none;
}

用Sass语言编写代码的话，可以这样书写：

nav {
	ul{
		margin:0;
        padding:0;
        list-style;:none;
	}
	li{
		display:inline-block;
	}
	 a{
	 	display:block;
		padding:4px;
	 	text-decoration: none;
	 }
}

我们常用的CSS属性中，如：font-family、font-size、font-weight、，或者是text-align、text-indent、text-overflow,他们都有同样的前缀，这个时候我们可以用Sass的嵌套属性编写：

font:{
	family:sans-serif;
	size：#000;
	weight：bold;
}
text:{
	align:center;
	indent：2em;
	overflow：hidden;
}

输出为：

	font-family:sans-serif;
	font-size：#000;
	font-weight：bold;
	
	text-align:center;
	text-indent：2em;
	text-overflow：hidden;

混合

@mixin 指令定义一个可以在整个样式表中重复使用的样式，@include 指令可以将混入（mixin）引入到文档中。

@mixin 定义混入：

@mixin main-text{
	font-size:16px;
	font-weight:bold;
	color:green;
}

**注意：**Sass 的连接符号 - 与下划线符号 _ 是相同的，也就是 @mixin main-text { } 与 @mixin main_text { } 是一样的混入。

@include 引入混入：

.demo{
	@include main-text;
	banckground-color:green;
}

输出为：

.demo{
	font-size:16px;
	font-weight:bold;
	color:green;
	banckground-color:green;
}

向@mixin传递变量

@mixin bordered($color, $width) {
 	border: $width solid $color;
}

.mytitle {
 @include bordered(#000, 1px); 
}

.myword {
 @include bordered(#fff, 2px);
}

输出为：

.mytitle{
	border:1px solid #000;
}
.myword {
	border:2px solid #fff;
}

混入的参数也可以定义默认值(即没写就为默认值，写了便是其值)，语法格式如下：

@mixin bordered($color: #000, $width: 1px) {
  border: $width solid $color;
}

继承

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承，如下所示：

.button_father{
	border: none;
    padding: 10px 20px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}
.button_child{
	@extend button_father;
	background-color:green;
}

输出为：

.button_father，
.button_child{
	border: none;
    padding: 10px 20px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
}
.button_child{
	background-color:green;
}

使用 @extend 后，在 HTML 按钮标签中就不需要指定多个类 class="button_father button_child" ，只需要设置 class="button_child" 类就好了。@extend 很好的体现了代码的复用。

循环语句

@for

from...through...

#for $var from start through end{}

例子：

@for $i from 1 through 3{
	.large-#{$i}{
		font-size:10px *$i;
	}
}

输出为：

.large-1{
	font-size:10px;
}
.large-2{
	font-size:20px;
}
.large-3{
	font-size:30px;
}

from...to...

#for $var from start to end{}

例子：

@for $i from 1 to 3{    
    .large-#{$i}{
        font-size:10px *$i;    
    }
}

输出为：

.large-1{
	font-size:10px;
}
.large-2{
	font-size:20px;
}

@each

在Sass中,数组便是通过空格或者逗号分隔的一系列的值,比如1 2 3 4或1,2,3,4；还可以由多维数组,比如1 2, 3 4表示包含1 2与3 4两个数组的数组,还可以这样(1 2) (3 4)

@each $var in <list>

是一系列以逗号分隔的值列表(数组):

@each $demo in user, nav, person {   
  .#{$demo}-icon {   
    background-image: url('/images/#{$demo}.png');   
  }  
}

输出为：

.user-icon { background-image: url("/images/user.png"); }   
.nav-icon { background-image: url("/images/nav.png"); }   
.person-icon { background-image: url("/images/person.png"); }

对于多维数组：

@each $var1, $var2 in ($value,$value),($value,$value)

例子：

@each $font, $size in (large-1, 10px), (large-2, 20px) {   
  .#{$font} {   
    font-size: $size;   
  }  
}

输出为：

.large-1 { font-size: 10px; }   
.large-2 { font-size: 20px; }

对于元素是键值对形式的数组:

@each $key, $value in (key: value, key: value)

例子：

@each $selector, $size in (div: 10px, p: 20px) {   
  #{$selector} {   
    font-size: $size;   
  }  
}

输出为：

div { font-size: 10px; }   
p { font-size: 20px; }

@while

@while 指令重复输出格式直到表达式返回结果为 false:

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

函数

字符串函数

数字相关函数

List相关函数

Map(映射)函数

Sass 选择器相关函数

Introspection 函数

Sass 颜色相关函数

Sass、LESS 和 Stylus的差异

Sass的安装需要Ruby环境，是在服务端处理的；

Less是需要引入less.js来处理Less代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放到项目中；

Stylus需要安装node，然后安装最新的stylus包即可使用

变量符不一样

Less是@，而Scss是， Stylus样式中声明变量没有任何限定，你可以使用“”符号开始。结尾的分号（;）可有可无，但变量名和变量值之间的等号（=）是需要的。有一点需要注意的是，如果我们使用“@”符号开头来声明变量，Stylus会进行编译，但其对应的值并不会赋值给变量。换句话说，在Stylus中不要使用“@”符号开头声明变量。Stylus中调用变量的方法和LESS、Sass是完全相同的。

输出设置

Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded

Sass输出样式的风格可以有四种选择，默认为nested

  • nested：嵌套缩进的css代码
  • expanded：展开的多行css代码
  • compact：简洁格式的css代码
  • compressed：压缩后的css代码

处理条件语句

Sass支持条件语句，可以使用if{}else{},for{}循环等等。 LESS的条件语句使用有些另类，他不是我们常见的关键词if和else if之类，而其实现方式是利用关键词“when”。stylus的条件语句的使用和其他编程的条件语句使用基本类似，不同的是他可以在样式去省略大括号（｛｝）：

引用外部CSS文件

scss引用的外部文件命名必须以开头, 如下例所示:其中 test1.scss、test2.scss、test3.scss文件分别设置的h1 h2 h3。文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为css文件.

// 源代码：
@import "_test1.scss";
@import "_test2.scss";
@import "_test3.scss";
// 编译后：
h1 {
    font-size: 17px;
}
h2 {
    font-size: 17px;
}
h3 {
    font-size: 17px;
}

Less引用外部文件和css中的@import没什么差异。

Stylus同样可以用@import，也支持其他文件通过@import进行引入,和js联系更加紧密

优缺点

  1. sass（sass.bootcss.com/）

    优点:用户多，更容易找到会用scss的开发，更容易找到scss的学习资源； 可编程能力比较强，支持函数，列表，对象，判断，循环等； 相比less有更多的功能； Bootstrap/Foundation等使用scss； 丰富的sass库：Compass/Bourbon；

    缺点：在公司内部安装node-sass会失败，需要使用cnpm或者手工安装

  2. less（less.bootcss.com/）

    优点：可以在浏览器中运行，实现主题定制功能；

    缺点：编程能力弱，不直接支持对象，循环，判断等。

  3. stylus（www.zhangxinxu.com/jq/stylus/）

    优点：简洁和灵活，可选的冒号，分号，逗号和大括号，只需要正确使用缩进，一下子大大提高了编程效率。

    缺点：人气不高和教程较少,有一定的学习成本

avatar
文章
阅读
粉丝