Sass 用法指南

时间  2019-11-07
标签 sass 用法 指南 繁體版
原文   原文链接
对于大部分前端程序员来讲，最痛苦的是莫过于写样式（css）了,试想一下，当作了 一个炫酷插件，或者实现了多牛逼的功能，但是没有完美样式，是不被人宠幸的，巨了解，我身边绝大部分的人都及其不喜欢写样式，一方面：嵌套多层元素时，那选择器的写法可不建议简写，毕竟涉及到样式覆盖与权重的问题；第二方面：对于某些程序员来讲这与体力活不差一二。但是在我看来，一个优秀的，吸引人的web，样式的成分仍是仍是处于上游的，试想一下，一个web，没有“华丽”的表面，怎么吸引人的注意？我始终相信这样一句话“天无绝程序员之路”，这时候sass就拯救了咱们

1、什么是SASS

SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。css

本文总结了SASS的主要用法。个人目标是，有了这篇文章，平常的通常使用就不须要去看官方文档了。html

2、安装和使用

2.1 安装

SASS是Ruby语言写的，可是二者的语法没有关系。不懂Ruby，照样使用。只是必须先安装Ruby，而后再安装SASS。前端

假定你已经安装好了Ruby，接着在命令行输入下面的命令：程序员

　　gem install sass复制代码

而后，就可使用了。web

2.2 使用

SASS文件就是普通的文本文件，里面能够直接使用CSS语法。文件后缀名是.scss，意思为Sassy CSS。面试

下面的命令，能够在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）shell

　 sass test.scss复制代码

若是要将显示结果保存成文件，后面再跟一个.css文件名。编程

　　sass test.scss test.css复制代码

SASS提供四个编译风格的选项：浏览器

* nested：嵌套缩进的css代码，它是默认值。　　
* expanded：没有缩进的、扩展的css代码。　　
* compact：简洁格式的css代码。　　
* compressed：压缩后的css代码。复制代码

生产环境当中，通常使用最后一个选项。sass

　sass --style compressed test.sass test.css复制代码

你也可让SASS监听某个文件或目录，一旦源文件有变更，就自动生成编译后的版本。

// watch a file　　
sass --watch input.scss:output.css　　
// watch a directory　　
sass --watch app/sass:public/stylesheets复制代码

SASS的官方网站，提供了一个在线转换器。你能够在那里，试运行下面的各类例子。

3、基本用法

3.1 变量

SASS容许使用变量，全部变量以$开头。

$blue : #1875e7;　　　
div {　　　
    color : $blue;　　
}复制代码

若是变量须要镶嵌在字符串之中，就必须须要写在#{}之中。

$side : left;　　
.rounded {　　　　
    border-#{$side}-radius: 5px;　　
}复制代码

3.2 计算功能

SASS容许在代码中使用算式：

body {　　　　
    margin: (14px/2);　　　　
    top: 50px + 100px;　　　　
    right: $var * 10%;　　
}复制代码

3.3 嵌套

SASS容许选择器嵌套。好比，下面的CSS代码：

div h1 {　　　　
    color : red;　　
}复制代码

能够写成：

div {　　　　
    hi {　　　　　　
        color:red;　　　　
    }　　
}复制代码

属性也能够嵌套，好比border-color属性，能够写成：

p {　　　　
    border: {　　　　　　
        color: red;　　　　
    }　　
}复制代码

注意，border后面必须加上冒号。

在嵌套的代码块内，可使用&引用父元素。好比a:hover伪类，能够写成：

a {　　　　
    &:hover { 
        color: #ffb3ff; 
    }　　
}复制代码

3.4 注释

SASS共有两种注释风格。

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即便是压缩模式编译，也会保留这行注释，一般能够用于声明版权信息。

/*! 　　　　
    重要注释！　　
*/复制代码

4、代码的重用

4.1 继承

SASS容许一个选择器，继承另外一个选择器。好比，现有class1：

.class1 {　　　　
    border: 1px solid #ddd;　　
}复制代码

class2要继承class1，就要使用@extend命令：

.class2 {　　　　
    @extend .class1;　　　　
    font-size:120%;　　
}复制代码

4.2 Mixin

Mixin有点像C语言的宏（macro），是能够重用的代码块。

使用@mixin命令，定义一个代码块。

@mixin left {　　　　
    float: left;　　　　
    margin-left: 10px;　　
}复制代码

使用@include命令，调用这个mixin。

div {　　　　
    @include left;　　
}复制代码

mixin的强大之处，在于能够指定参数和缺省值。

@mixin left($value: 10px) {　　　　
    float: left;　　　　
    margin-right: $value;　　
}复制代码

使用的时候，根据须要加入参数：

div {　　　　
    @include left(20px);　　
}复制代码

下面是一个mixin的实例，用来生成浏览器前缀。

@mixin rounded($vert, $horz, $radius: 10px) {　　　　
    border-#{$vert}-#{$horz}-radius: $radius;　　　　
    -moz-border-radius-#{$vert}#{$horz}: $radius;　　　　
    -webkit-border-#{$vert}-#{$horz}-radius: $radius;　　
}复制代码

使用的时候，能够像下面这样调用：

#navbar li {
    @include rounded(top, left); 
}　　
#footer { 
    @include rounded(top, left, 5px); 
}复制代码

4.3 颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c　　
darken(#cc3, 10%) // #a3a329　　
grayscale(#cc3) // #808080　　
complement(#cc3) // #33c复制代码

4.4 插入文件

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

　@import "path/filename.scss";复制代码

若是插入的是.css文件，则等同于css的import命令。

@import "foo.css";复制代码

5、高级用法

5.1 条件语句

@if能够用来判断：

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

配套的还有@else命令：

@if lightness($color) > 30% {　　　　
    background-color: #000;　　
} 
@else {　　　　
    background-color: #fff;　　
}复制代码

5.2 循环语句

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");　　　　
    }　　
}复制代码

5.3 自定义函数

SASS容许用户编写本身的函数。

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



Sass 相关面试问题

什么是SASS？

SASS（Syntactically Awesome Stylesheet）是一个CSS预处理器，有助于减小CSS的重复，节省时间。 它是更稳定和强大的CSS扩展语言，描述文档的样式干净和结构。

一、为何要使用SASS？

  • 它是预处理语言，它为CSS提供缩进语法（它本身的语法）。

  • 它容许更有效地编写代码和易于维护。

  • 它是包含CSS的全部功能的CSS的超集，是一个开源的预处理器，以 Ruby 编码。

  • 它提供了比平面CSS好的结构格式的文档样式。

  • 它使用可重复使用的方法，逻辑语句和一些内置函数，如颜色操做，数学和参数列表。

二、列出SASS的一些功能？

  • 它是更稳定，强大，与CSS的版本兼容。

  • 它是超集的CSS和基于JavaScript。

  • 它被称为CSS的语法糖，这意味着它使用户更容易阅读或表达的东西更清楚。

  • 它使用本身的语法并编译为可读的CSS。

  • 你能够在更少的时间内轻松地编写CSS代码。

  • 它是一个开源的预处理器，被解释为CSS。

三、SASS的优势是什么？

  • 它容许在编程结构中编写干净的CSS。

  • 它有助于编写CSS更快。

  • 它是CSS的超集，帮助设计师和开发人员更有效率和快速地工做。

  • 因为Sass兼容全部版本的CSS，咱们可使用任何可用的CSS库。

  • 可使用嵌套语法和有用的函数，如颜色操做，数学和其余值。

四、SASS的缺点是什么？

  • 开发人员须要时间了解此预处理器中存在的新功能。

  • 若是更多的人在同一个网站上工做，那么将使用相同的预处理器。 有些人使用Sass，有些人使用CSS直接编辑文件。 所以，它将变得难以与现场工做。

  • 有机会失去浏览器的内置元素检查器的好处。

五、列出SASS支持的两种语法？

SASS支持两种语法，即 SCSS 和缩进语法。

  • SCSS（Sassy CSS）是CSS语法的扩展，能够更容易地维护大型样式表，而且能够识别供应商特定的语法和许多CSS。 SCSS文件使用扩展名 .scss 。

  • 缩进是较旧的语法，有时仅称为 Sass 。 使用这种形式的语法，能够简洁地编写CSS。 SASS文件使用扩展名 .sass 。

六、有多少种方法可使用SASS？

您可使用三种不一样的方式使用SASS:

  • 做为命令行工具

  • 做为一个Ruby模块

  • 做为Rack启用框架的插件

七、SASS中的嵌套规则是什么？

嵌套是不一样逻辑结构的组合。 使用SASS，咱们能够将多个CSS规则相互组合。 若是使用多个选择器，则能够在另外一个选择器中使用一个选择器来建立复合选择器。

八、如何在SASS中引用父选择器？

您可使用＆amp; 字符选择父级选择器。 它告诉父选择器应该插入的位置。

九、如何在SASS中写入占位符选择器？

SASS使用 class 或 id 选择器支持占位符选择器。 在正常CSS中，这些用“＃"或“。"指定，但在SASS中，它们替换为“％"。

十、列出SASS上的不一样类型的运算符？

有5种类型的运算符:

  • 数字运算符

  • 颜色运算符

  • 字符串运算符

  • 布尔运算符

  • 列表运算符

什么是数字运算？

它容许诸如加法，减法，乘法和除法的数学运算。

什么是彩色运算？

它容许使用颜色份量和算术运算。

什么是列表运算？

列表表示使用逗号或空格分隔的一系列值。

什么是布尔运算？

您可使用and、or和not（与或非）对Sass脚本执行布尔运算。

SASS中的括号是什么？

括号是一对标记，一般用圆括号（）或方括号[]来标记，这提供了影响操做顺序的符号逻辑。

什么是SASS中的插值？

它使用＃{} 语法提供选择器和属性名称中的SassScript变量。 您能够在花括号中指定变量或属性名称。

什么是可变默认值？

您能够经过向变量值的结尾添加 ！default 标志来设置变量的默认值。若是值已经分配给变量，则不会从新分配该值。

什么是导入指令？

它直接采用文件名导入，全部导入的文件将合并到一个单一的CSS文件。

什么是媒体指令？

它将样式规则设置为不一样的媒体类型。

什么是扩展指令？

它用于共享选择器之间的规则和关系。 它能够在一个类中扩展全部其余类样式，也能够应用本身的特定样式。

什么是根指令？

它是一个嵌套规则的集合，它可以在文档的根节点建立样式块。

什么是@if指令？

它用于基于表达式求值的结果选择性地执行代码语句。

什么是@else if指令？

@else if语句与@if指令一块儿使用，每当@if语句失败，则尝试@else if语句，若是它们也失败，则执行@else。

什么是@for指令？

它容许您在循环中生成样式。 计数器变量用于设置每次迭代的输出。

什么是@each指令？

在@each指令中，定义了一个包含列表中每一个项目的值的变量。

什么是@mixin指令？

它用于定义mixin，其中包含可选的mixin名称以后的变量和参数。

什么是@include指令？

它用于在文档中包含mixin，由mixin定义的样式能够包含在当前规则中。

什么是mixin 参数?

SassScript值能够做为mixin中的参数，当mixin包含并在mixin中做为变量使用时，能够将其做为参数。

列出两种类型的mixin参数？

有两种类型的mixin参数:

  • 关键字参数

  • 可变参数

什么是关键字参数？

它用于在mixin中包含参数。 命名的参数能够按任何顺序传递，参数的默认值能够省略。

什么是可变参数？

变量参数用于将任意数量的参数传递给mixin。 它包含传递给函数或mixin的关键字参数。

什么是函数指令？

使用函数指令，能够建立本身的函数，并在脚本上下文中使用它们，或者可使用任何值。

什么是SASS输出样式？

SASS生成的CSS文件由反映文档结构的默认CSS样式组成。 默认的CSS样式很好，但可能不适合全部状况。

什么是嵌套CSS样式？

嵌套样式是SASS的默认样式。 这种方式的样式在处理大型CSS文件时很是有用。

什么是扩展CSS样式？

在扩展输出样式中，每一个属性和规则都有本身的线。 与嵌套CSS样式相比，它须要更多的空间。

什么是紧凑的CSS样式？

紧凑的CSS风格竞争力比Expanded和Nested占用更少的空间。 它主要关注选择器而不是其属性。

什么是压缩CSS样式？

与全部其余样式相比，压缩的CSS样式占用最少的空间。 它仅提供空格，以在文件末尾分隔选择器和换行符。

SASS缩进语法的主要特色是什么？

  • 它使用缩进而不是 {和} 来分隔块。

  • 要分隔语句，它使用换行符而不是分号（;）。

  • 属性声明和选择器必须放在本身的行上， {和} 中的语句必须放在>和缩进。

有多少种方法能够声明CSS属性？

CSS属性能够经过两种方式声明:

  • 属性能够声明为相似于CSS但没有分号（;）。

  • colon（:）将以每一个属性名称为前缀。

什么是写@mixin和@include指令的速记？

您可使用= for @mixin指令和+ for @include指令，这须要更少的键入，使您的代码更简单，更容易阅读。

每当SASS文件更改时，使用哪一个命令来观察文件并更新CSS？

sass --watch C:\\ ruby \\ lib \\ sass \\ style.scss:style.css

什么是SASS的注释？

注释占用整行并包围嵌套在它们下面的全部文本，它们是基于行的缩进语法。

哪一个命令用于从命令行运行SASS代码？

sass input.scss output.css

样式表的字符编码的CSS规范是什么？

  • 首先它检查Unicode字节，下一个@charset声明，而后检查Ruby字符串编码。

  • 接下来，若是未设置任何内容，则会将字符集编码视为。

  • 使用@charset声明显式地肯定字符编码。 只需在样式表的开头使用“@charset encoding name"，SASS将假设这是给定的字符编码。

  • 若是SASS的输出文件包含非ASCII字符，那么它将使用 @charset 声明。

有多少种注释类型？

Sass支持两种类型的注释:

  • 多行注释 - 使用/ *和* /写入。 多行注释保存在CSS输出中。

  • 单行注释 - 这些是使用 // 和注释写成的。 单行注释不会保留在CSS输出中。

什么是交互式shell？

它使用命令行评估SassScript表达式。 您可使用sass命令行和 -i 选项运行shell。

什么是@debug指令？

它检测错误并将SassScript表达式值显示到标准错误输出流。

什么是@error指令？

它将SassScript表达式值显示为致命错误。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程