CSS預處理器Sass實例詳解
- 小云云原創
- 2018-01-15 09:51:581759瀏覽
本文主要介紹了CSS預處理器Sass詳解的相關資料,小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧，希望能幫助大家。
Sass 是一款強化CSS 的輔助工具，它在CSS 語法的基礎上增加了變數(variables)、嵌套(nested rules)、混合(mixins)、導入(inline imports) 等高階功能，這些拓展令CSS 更加強大與優雅。使用 Sass 以及 Sass 的樣式庫（如 Compass）有助於更好地組織管理樣式文件，以及更有效率地開發專案。
1. 特色功能
完全相容CSS3
在CSS 基礎上增加變數、嵌套(nesting)、混合(mixins) 等功能
透過函數進行顏色值與屬性值的運算
提供控制指令( control directives)等進階功能
自訂輸出格式
#檔案字尾名稱：sass有兩種字尾名文件，一種後綴名為sass，不使用大括號和分號；另一種就是我們這裡使用的scss文件，這種和我們平時寫的css文件格式差不多，使用大括號和分號。而本教學中所說的所有sass檔案都指後綴名為scss的檔案。在此也建議使用後綴名為scss的文件，以避免sass後綴名的嚴格格式要求報錯。
//文件后缀名为sass的语法
body
background: #eee
font-size:12px
p
background: #0982c1
//文件后缀名为scss的语法
body {
background: #eee;
font-size:12px;
}
p{
background: #0982c1;
}2. Sass、Less語法比較
2.1 Sass與Less不同之處
#編譯環境不一樣－Sass基於Ruby等伺服器端環境編譯,Less既可以支援伺服器端編譯也可在客戶端（瀏覽器環境）編譯
變數符不一樣－Sass使用$符號宣告變量，Less使用@符號宣告變數
#對於條件語句的支援不一樣－Sass支援複雜的條件語句（類似if..else..），Less只支援簡單的條件語句(類似if()..)
作用域－Sass局部修改變數可影響全域變量，Less則只會在局部作用域生效。
引用外部CSS檔案方式不同－Sass預設引入.sass或.scss檔案時可忽略後綴，Less則需要透過關鍵字配置來控制引入檔案如何處理。
2.2 Sass與Less相似的地方
#混入(Mixins)－類似於函數或巨集，並且可以傳遞參數；
嵌套規則－class中嵌套class，從而減少重複的程式碼；
- ##運算－CSS中運用加減乘除計算各種數值以及字串等；
- 顏色功能－可以透過內建函數編輯顏色；
- 命名空間(namespace)－分組樣式，因此可以被呼叫；
#3.Sass語法主要功能介紹
3.1 CSS功能擴充
巢狀規則
Sass 允許將一套CSS 樣式嵌套進另一套樣式中，內層的樣式將它外層的選擇器作為父選擇器，巢狀功能避免了重複輸入父選擇器，而且令複雜的CSS 結構更容易管理，例如：//sass style or less style
#main p {
color: #00ff00;
width: 97%;
.redbox {
background-color: #ff0000;
color: #000000;
}
}
//css style
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
background-color: #ff0000;
color: #000000; }
父選擇器&
在巢狀CSS 規則時，有時也需要直接使用巢狀外層的父選擇器，例如，當給某個元素設定hover 樣式時，或者當body 元素有某個classname 時，可以用& 來代表嵌套規則外層的父選擇器。//sass style or less style
a {
font-weight: bold;
text-decoration: none;
&:hover { text-decoration: underline; }
body.firefox & { font-weight: normal; }
}
//css style
a {
font-weight: bold;
text-decoration: none; }
a:hover {
text-decoration: underline; }
body.firefox a {
font-weight: normal; }
屬性巢狀
#有些CSS 屬性遵循相同的命名空間(namespace)，例如font-family, font- size, font-weight 都是以font 為屬性的命名空間。為了方便管理這樣的屬性，同時也為了避免了重複輸入，Sass 允許將屬性嵌套在命名空間中，例如：//sass style
.funky {
font: {
family: fantasy;
size: 30em;
weight: bold;
}
}
//css style
.funky {
font-family: fantasy;
font-size: 30em;
font-weight: bold; }命名空間也可以包含自己的屬性值，例如：
//sass style
.funky {
font: 20px/24px {
family: fantasy;
weight: bold;
}
}
//css style
.funky {
font: 20px/24px;
font-family: fantasy;
font-weight: bold; }
3.2導入
sass的導入(@import)規則和CSS的有所不同，編譯時會將@import的scss檔合併進來只產生一個CSS檔。但如果你在sass檔中導入css檔如@import 'reset.css'，效果跟普通CSS導入樣式檔一樣，導入的css檔不會合併到編譯後的檔中，但會以@import 方式存在。 所有的sass導入檔案都可以忽略後綴名.scss。一般來說基礎的檔案命名方法以_開頭，如_mixin.scss。這種文件在導入的時候可以不寫下劃線，可寫成@import “mixin”。 less的導入(@import)語法：@import (keyword) “filename”;多個關鍵字@import 是允許的，你必須使用逗號分隔關鍵字：example: @import (optional, reference) “foo.less”;- reference: 使用該less檔但是不輸出它
- inline: 包括在來源檔案中輸出，但是不作處理
less: 将该文件视为less文件，无论其扩展名为什么
css: 将文件视为css文件，无论扩展名为什么
once: 该文件仅可导入一次 (默认)
multiple: 该文件可以多次导入
optional: 当没有发现文件时仍然编译
导入文件代码示例：
/*被导入sass文件a.scss，less文件a.less：*/
//a.scss or a.less
//-------------------------------
body {
background: #eee;
}
/*需要导入样式的sass文件b.scss，less文件b.less：*/
@import "reset.css";
@import "a";
p{
background: #0982c1;
}
/*转译出来的b.css样式：*/
@import "reset.css";
body {
background: #eee;
}
p{
background: #0982c1;
}根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了。同理，less中也是这样处理的。
3.3 注释 /* */ 与 //
Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会。Less中不用担心这一点，Less中多行注释 /* */，以及单行注释 //都可以随意使用，都会在编译过程中被保留。例如：
//sass style
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
//css style
/* This comment is
* several lines long.
* since it uses the CSS comment syntax,
* it will appear in the CSS output. */
body {
color: black; }
a {
color: green; }3.4 SassScript
变量 $
Sass的变量必须是$开头，后面紧跟变量名，如果值后面加上!default则表示默认值。Less的变量与Sass类似，只是使用符号不同，Less中采用的是@
//sass style
//-------------------------------
$fontSize: 12px;
body{
font-size:$fontSize;
}
//less style
//-------------------------------
@fontSize: 12px;
body{
font-size:@fontSize;
}
//css style
//-------------------------------
body{
font-size:12px;
}变量默认值
sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在使用默认变量之前重新声明下变量即可；默认变量的价值在进行组件化开发的时候会非常有用。
//sass style
//-------------------------------
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:1.5;
}
/*覆盖默认值*/
//sass style
//-------------------------------
$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
line-height: $baseLineHeight;
}
//css style
//-------------------------------
body{
line-height:2;
}变量 #{} 的使用形式
一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。
//sass style
//-------------------------------
$borderDirection: top !default;
$baseFontSize: 12px !default;
$baseLineHeight: 1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
font:#{$baseFontSize}/#{$baseLineHeight};
}
//css style
//-------------------------------
.border-top{
border-top:1px solid #ccc;
}
body {
font: 12px/1.5;
}多值变量 list
简单来说list类型有点像js中的数组。list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。
关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等
定义：
//一维数据 $px: 5px 10px 20px 30px; //二维数据，相当于js中的二维数组 $px: 5px 10px, 20px 30px; $px: (5px 10px) (20px 30px);
使用方法：
//sass style
//-------------------------------
$linkColor: #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
color:nth($linkColor,1);
&:hover{
color:nth($linkColor,2);
}
}
//css style
//-------------------------------
a{
color:#08c;
}
a:hover{
color:#333;
}多值变量 map
简单来说map类型有点像es6语法中的map数据结构。map数据以key和value成对出现，其中value又可以是list。
格式为：$map: (key1: value1, key2: value2, key3: value3);可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等
定义：
$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);
使用方法：
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}变量作用域
Sass和Less中的变量作用域分别类似与javascript中的两种变量申明方式，下面一段代码可以对比出变量声明时的不同处理方式。
Sass中的变量赋值直接修改全局变量，Less中的变量赋值可只在局部生效。
//Sass style
$color:red;
p{
$color:blue;
color:$color;//blue
}
a{
color:$color;//blue
}
//Less style
@color:red;
p{
@color:blue;
color:@color;//blue
}
a{
color:@color;//red
}3.5 混合(mixin)
sass中使用@mixin声明混合，可以传递参数，也可以给参数设置默认值。声明的@mixin通过@include来调用；在less中只需要将定义好的class用类似函数的方式直接引用。
无参数 mixin
//sass style
@mixin center-block {
margin-left:auto;
margin-right:auto;
}
.demo{
@include center-block;
}
//less style
.center-block {
margin-left:auto;
margin-right:auto;
}
.demo{
.center-block;
}
//css style
.demo{
margin-left:auto;
margin-right:auto;
}有参数 mixin
//sass style
@mixin opacity($opacity:50) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
.opacity-80{
@include opacity(80); //传递参数
}
//less style
.opacity(@opacity:50) {
opacity: @opacity / 100;
filter: alpha(opacity=@opacity);
}
.opacity-80{
.opacity(80); //传递参数
}
//css style
.opacity-80{
opacity: .8;
filter: alpha(opacity=80);
}多个参数 mixin
Sass调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入；Less中使用方法类似。
//sass style
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
border-bottom:$border;
padding-top:$padding;
padding-bottom:$padding;
}
.imgtext-h li{
@include horizontal-line(1px solid #ccc);
}
//less style
.horizontal-line(@border:1px dashed #ccc, @padding:10px){
border-bottom:@border;
padding-top:@padding;
padding-bottom:@padding;
}
.imgtext-h li{
.horizontal-line(1px solid #ccc);
}
//css style
.imgtext-h li {
border-bottom: 1px solid #cccccc;
padding-top: 10px;
padding-bottom: 10px;
}多组值参数 mixin
Sass中如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables…；Less表示不定参数时可以直接使用 … 表示，并用@arguments表示所有参数
//sass style
//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
-webkit-box-shadow:$shadow;
box-shadow:$shadow;
}
.box{
border:1px solid #ccc;
@include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//less style
.box-shadow(...) {
-webkit-box-shadow:@arguments;
box-shadow:@arguments;
}
.box{
border:1px solid #ccc;
.box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//css style
.box{
border:1px solid #ccc;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}3.6 运算
sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量、字符串等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。
//计算数值、变量
$baseFontSize: 14px !default;
$baseLineHeight: 2 !default;
$baseGap: $baseFontSize * $baseLineHeight !default; // => 28px
$halfBaseGap: $baseGap / 4 !default; // => 7px
$samllFontSize: $baseFontSize - 2px !default; // => 12px
$_columns: 12 !default;
$_column-width: 60px !default;
$_gutter: 20px !default;
$_gridsystem-width: $_columns * ($_column-width + $_gutter); // => 960px
//计算颜色
p {
color: #010203 + #040506; // => #050709
}
//计算字符串
p:before {
content: "Foo " + Bar; // => "Foo Bar"
font-family: sans- + "serif"; // => sans-serif
}3.7 控制指令
SassScript 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用。
@if
//sass style
p {
@if 1 + 1 == 2 { border: 1px solid; }
@if 5 < 3 { border: 2px dotted; }
@if null { border: 3px double; }
}
//css style
p {
border: 1px solid; }
//sass style
$type: monster;
p {
@if $type == ocean {
color: blue;
} @else if $type == matador {
color: red;
} @else if $type == monster {
color: green;
} @else {
color: black;
}
}
//less style
@type: monster;
p (@type) when (@type = ocean){color: blue;}
p (@type) when (@type = matador){color: red;}
p (@type) when (@type = monster){color: green;}
p (@type) when (@type = dark){color: black;}
//css style
p {
color: green; }@for
@for 指令包含两种格式：@for $var from 5151abf5f2f2896f3332f558b89cf20a through 55ce3cce52a8c4396e1d2f10875a095a，或者 @for $var from 5151abf5f2f2896f3332f558b89cf20a to 55ce3cce52a8c4396e1d2f10875a095a，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 5151abf5f2f2896f3332f558b89cf20a 与 55ce3cce52a8c4396e1d2f10875a095a 的值，而使用 to 时条件范围只包含 5151abf5f2f2896f3332f558b89cf20a 的值不包含 55ce3cce52a8c4396e1d2f10875a095a 的值。另外，$var 可以是任何变量，比如 $i；5151abf5f2f2896f3332f558b89cf20a 和 55ce3cce52a8c4396e1d2f10875a095a 必须是整数值。
//sass style
@for $i from 1 through 3 {
.item-#{$i} { width: 2em * $i; }
}
//css style
.item-1 {
width: 2em; }
.item-2 {
width: 4em; }
.item-3 {
width: 6em; }@each
语法为：@each $var in 318243e94be5423f7ba05ee6944632b7。其中$var表示变量，而list和map表示list类型数据和map类型数据。
单个字段list数据循环：
//sass 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');
}多个字段list数据循环：
//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
.#{$animal}-icon {
background-image: url('/images/#{$animal}.png');
border: 2px solid $color;
cursor: $cursor;
}
}
//css style
//-------------------------------
.puma-icon {
background-image: url('/images/puma.png');
border: 2px solid black;
cursor: default;
}
.sea-slug-icon {
background-image: url('/images/sea-slug.png');
border: 2px solid blue;
cursor: pointer;
}
.egret-icon {
background-image: url('/images/egret.png');
border: 2px solid white;
cursor: move;
}多个字段map数据循环：
//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
#{$header} {
font-size: $size;
}
}
//css style
//-------------------------------
h1 {
font-size: 2em;
}
h2 {
font-size: 1.5em;
}
h3 {
font-size: 1.2em;
}@extend
@extend 的作用是将重复使用的样式 (.error) 延伸 (extend) 给需要包含这个样式的特殊样式（.seriousError），例子：
//sass style
//-------------------------------
.error {
border: 1px #f00;
background-color: #fdd;
}
.error.intrusion {
background-image: url("/image/hacked.png");
}
.seriousError {
@extend .error;
border-width: 3px;
}
//css style
//-------------------------------
.error, .seriousError {
border: 1px #f00;
background-color: #fdd; }
.error.intrusion, .seriousError.intrusion {
background-image: url("/image/hacked.png"); }
.seriousError {
border-width: 3px; }3.8 函数指令
Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：
//sass style
//-------------------------------
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
@return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
//css style
//-------------------------------
#sidebar {
width: 240px; }与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果。
Sass 函数允许使用关键词参数，上面的例子也可以写成：
//关键词参数调用形式
#sidebar { width: grid-width($n: 5); }虽然不够简明，但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。
相关推荐：
以上是CSS預處理器Sass實例詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！