首頁

web前端

html教學

Sass-也許你想跟CSS玩起來（下篇）

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 30, 2016 am 09:21 AM

問心無愧，共勉！

sass-也許你想跟CSS玩起來（上篇）

上篇主要介紹了一些sass的基本特性。下篇中，主要是寫一些我們常用的sass控制指令，函數和規則。

sass進階

控制命令

可能看過上篇的朋友會發現在有些代碼中出現@if,@else,@each等，熟悉JS條件語句和循環的朋友會比較了解這些控制命令的功能所在，這些控制命令是sass的一個重要組成部分。

@if,@else

@if@else是一個簡單的根據條件來處理樣式區塊的SassScript，如果if的條件是true那麼就呼叫if的樣式區塊，否則就呼叫else的樣式區塊，一個簡單的程式碼範例

<span style="color: #800000;">@mixin GOD($SHOW:true) </span>{<span style="color: #ff0000;">
  @if $SHOW {
      display</span>:<span style="color: #0000ff;"> block</span>;
    }<span style="color: #800000;">
    @else </span>{<span style="color: #ff0000;">
      display</span>:<span style="color: #0000ff;"> none</span>;
    }<span style="color: #800000;">
}

.block </span>{<span style="color: #ff0000;">
  @include GOD;
</span>}<span style="color: #800000;">

.hidden</span>{<span style="color: #ff0000;">
  @include GOD(false);
</span>}

上面的程式碼中因為.block呼叫沒有傳參if判斷為true，呼叫if裡面的程式碼區塊，.hidden呼叫GOD的時候傳入了參數false，false覆蓋原有預設參數，if判斷就為false，調用else程式碼區塊裡的程式碼。

@for循環

舉一個栗子，我們可能會寫到一個類似bootstrap的柵格網絡，col-1，col-2，col-3。。。這時候如果數目較多，可能寫起來會比較麻煩，那麼有了sass我們可以這樣寫

<span style="color: #800000;">@for $i from 1 through 5 </span>{ //生成到col-5<span style="color: #ff0000;">
  .col-#{$i</span>} {<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2rem * $i</span>; }<span style="color: #800000;">
}

@for $i from 1 to 5 </span>{ //生成到col-4<span style="color: #ff0000;">
  .col-#{$i</span>} {<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 2rem * $i</span>; }<span style="color: #800000;">
}</span>

語法規則是@for 變數from 起始to/through 結束，他有to和through兩種方法來形容“到”，他們的區別是1 to 5最後生成的只到.col-4而1 through 5是生成到col-5的，to會比through少一個。

@while循環

while循環和JS中的循環類似，我們看一個上面@for循環作用一樣的栗子

<span style="color: #800000;">$number: 5;
$number-width: 20px;

@while $number > 0 </span>{<span style="color: #ff0000;">
    .col-#{$number</span>} {<span style="color: #ff0000;">
        width</span>:<span style="color: #0000ff;"> $mumber-width * $number</span>;
    }<span style="color: #800000;">
    $number: $number - 1;
}</span>

@each循環

<span style="color: #800000;">$list: adam john wynn mason kuroir;//$list 就是一个列表

@mixin author-images </span>{<span style="color: #ff0000;">
    @each $author in $list {
        .photo-#{$author</span>} {<span style="color: #ff0000;">
            background</span>:<span style="color: #0000ff;"> url("/images/avatars/#{$author</span>}<span style="color: #800000;">.png") no-repeat;
        }
    }
}

.author-bio </span>{<span style="color: #ff0000;">
    @include author-images;
</span>}

sass的@規則

@import

Sass 擴展了 CSS 的 @import 規則，讓它能夠引入 SCSS 和 Sass 檔案。所有引入的 SCSS 和 Sass 檔案都會被合併並輸出一個單一的 CSS 檔案。另外，被匯入的檔案中所定義的變數或 mixins 都可以在主檔案中使用。

<span style="color: #800000;">@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);</span>

@media

Sass 中的 @media 指令和 CSS 的使用規則一樣的簡單，但它有另一個功能，可以嵌套在 CSS 規則中。有點類似 JS 的冒泡功能一樣，如果在樣式中使用 @media 指令，它將冒泡到外面。

<span style="color: #800000;">.sidebar </span>{<span style="color: #ff0000;">
  width</span>:<span style="color: #0000ff;"> 300px</span>;<span style="color: #ff0000;">
  @media screen and (orientation</span>:<span style="color: #0000ff;"> landscape) {
    width: 500px</span>;
  }<span style="color: #800000;">
}</span>

@extend

Sass 中的 @extend 是用來擴充選擇器或占位符。

<span style="color: #800000;">.error </span>{<span style="color: #ff0000;">
  border</span>:<span style="color: #0000ff;"> 1px #f00</span>;<span style="color: #ff0000;">
  background-color</span>:<span style="color: #0000ff;"> #fdd</span>;
}<span style="color: #800000;">
.error.intrusion </span>{<span style="color: #ff0000;">
  background-image</span>:<span style="color: #0000ff;"> url("/image/hacked.png")</span>;
}<span style="color: #800000;">
.seriousError </span>{<span style="color: #ff0000;">
  @extend .error;
  border-width</span>:<span style="color: #0000ff;"> 3px</span>;
}

@at-root

@at-root 從字面上解釋就是跳出根元素。當你選擇器嵌套多層之後，想讓某個選擇器跳出，此時就可以使用 @at-root。

<span style="color: #800000;">.a </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> red</span>;<span style="color: #ff0000;">

  .b {
    color</span>:<span style="color: #0000ff;"> orange</span>;<span style="color: #ff0000;">

    .c {
      color</span>:<span style="color: #0000ff;"> yellow</span>;<span style="color: #ff0000;">

      @at-root .d {
        color</span>:<span style="color: #0000ff;"> green</span>;
      }<span style="color: #800000;">
    }
  }  
}</span>

編譯出來的結果

<span style="color: #800000;">.a </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> red</span>;
}<span style="color: #800000;">

.a .b </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> orange</span>;
}<span style="color: #800000;">

.a .b .c </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> yellow</span>;
}<span style="color: #800000;">

.d </span>{<span style="color: #ff0000;">
  color</span>:<span style="color: #0000ff;"> green</span>;
}

@debug，@warn，@error

這三個命令在 Sass 中是用來調試的，當你的在 Sass 的源碼中使用了這些指令之後，Sass 代碼在編譯出錯時，在命令終端會輸出你設定的提示 Bug

函数

sass的函数主要包括

字符串函数
数字函数
列表函数
颜色函数
Introspection 函数
三元函数
自定义函数

下面主要介绍一下这些函数的方法。

字符串函数

1，unquote()：

unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。

2，quote()：

quote() 函数刚好与 unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 ""

3，To-upper-case():

To-upper-case() 函数将字符串小写字母转换成大写字母。

4，To-lower-case()：

To-lower-case() 函数与 To-upper-case() 刚好相反，将字符串转换成小写字母

<span style="color: #800000;">.test1 </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;">  unquote('Hello Sass!') </span>;<span style="color: #ff0000;">//结果->content</span>:<span style="color: #0000ff;"> Hello Sass!</span>;
}<span style="color: #800000;">
.test2 </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> quote(Hello Sass!)</span>;<span style="color: #ff0000;">//结果->content</span>:<span style="color: #0000ff;"> "Hello Sass!"</span>;
}<span style="color: #800000;">
.test3 </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;"> to-upper-case("Hello Sass!")</span>;<span style="color: #ff0000;">//结果->content</span>:<span style="color: #0000ff;"> "HELLO SASS!" </span>;
}<span style="color: #800000;">
.test4 </span>{<span style="color: #ff0000;">
    content</span>:<span style="color: #0000ff;">  to-lower-case("'Hello Sass!'")</span>;<span style="color: #ff0000;">//结果->content</span>:<span style="color: #0000ff;"> "hello sass!"</span>;
}

数字函数

1，percentage($value)：将一个不带单位的数转换成百分比值；

2，round($value)：将数值四舍五入，转换成一个最接近的整数

3，ceil($value)：将大于自己的小数转换成下一位整数

4，floor($value)：将一个数去除他的小数部分

5，abs($value)：返回一个数的绝对值

6，min($numbers…)：找出几个数值之间的最小值

7，max($numbers…)：找出几个数值之间的最大值

8，random(): 获取随机数

<span style="color: #800000;">.div1</span>{<span style="color: #ff0000;">
    width </span>:<span style="color: #0000ff;"> percentage(5px / 10px) //20%
</span>}<span style="color: #800000;">
.div2</span>{<span style="color: #ff0000;">
    width </span>:<span style="color: #0000ff;"> round(5.4px) //5px
</span>}<span style="color: #800000;">
.div3</span>{<span style="color: #ff0000;">
    width </span>:<span style="color: #0000ff;"> ceil(7.1px) //8px
</span>}<span style="color: #800000;">
.div4</span>{<span style="color: #ff0000;">
    width </span>:<span style="color: #0000ff;"> floor(9.9px) //9px
</span>}<span style="color: #800000;">
.div5</span>{<span style="color: #ff0000;">
    width </span>:<span style="color: #0000ff;"> abs(-10px) //10px
</span>}<span style="color: #800000;">
.div6</span>{<span style="color: #ff0000;">
    width </span>:<span style="color: #0000ff;"> min(5px ,10px) //5px
</span>}<span style="color: #800000;">
.div7</span>{<span style="color: #ff0000;">
    width </span>:<span style="color: #0000ff;"> max(5px , 10px) //10px
</span>}<span style="color: #800000;">
.div8</span>{<span style="color: #ff0000;">
    width </span>:<span style="color: #0000ff;"> random()px //鬼才知道的随机数
</span>}

列表函数

length($list)：返回一个列表的长度值；

nth($list, $n)：返回一个列表中指定的某个标签

join($list1, $list2, [$separator])：将两个列给连接在一起，变成一个列表

append($list1, $val, [$separator])：将某个值放在列表的最后

zip($lists…)：将几个列表结合成一个多维的列表

index($list, $value)：返回一个值在列表中的位置值。

<span style="color: #800000;">length(10px) //1
length(10px 20px (border 1px solid) 2em) //4
length(border 1px solid) //3

nth(10px 20px 30px,1) //10px
nth((Helvetica,Arial,sans-serif),2) //"Arial"
nth((1px solid red) border-top green,1) //(1px "solid" #ff0000)

join(10px 20px, 30px 40px) //(10px 20px 30px 40px)
join((blue,red),(#abc,#def)) //(#0000ff, #ff0000, #aabbcc, #ddeeff)
join((blue red), join((#abc #def),(#dee #eff))) //(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

append(10px 20px ,30px) //(10px 20px 30px)

zip(1px 2px 3px,solid dashed dotted,green blue red) //((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

index(1px solid red, solid) //2<br></span>

<strong>需要注意的是join() 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错，但很多时候不只碰到两个列表连接成一个列表，这个时候就需要将多个 join() 函数合并在一起使用。在使用zip()函数时，每个单一的列表个数值必须是相同的。<br></strong>

Introspection函数

Introspection 函数包括了几个判断型函数：

type-of($value)：返回一个值的类型
unit($number)：返回一个值的单位
unitless($number)：判断一个值是否带有单位
comparable($number-1, $number-2)：判断两个值是否可以做加、减和合并

<span style="color: #800000;">type-of(100) //"number"
type-of(100px) //"number"
type-of("asdf") //"string"
type-of(asdf) //"string"
type-of(true) //"bool"
type-of(#fff) //"color"

unit(100) //""
unit(100px) //"px"
unit(20%) //"%"
unit(10px * 3em) //"em*px"
unit(10px * 2em / 3cm / 1rem) //"em/rem"

unitless(100) //true
unitless(100px) //false
unitless(100em) //false
unitless(1 /2 + 2 ) //true
unitless(1px /2 + 2 ) //false

comparable(2px,1%) //false
comparable(2px,1em) //false
comparable(2px,1cm) //true<br></span>

<strong>但加、减碰到不同单位时，unit() 函数将会报错，除 px 与 cm、mm 运算之外,unitless()有单位时返回false。</strong>

Miscellaneous函数

在这里把 Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

<span style="color: #800000;">if(true,1px,2px) //1px
if(false,1px,2px) //2px</span>

Map

Sass 的 map 常常被称为数据地图，也有人称其为数组，因为他总是以 key:value 成对的出现，但其更像是一个 JSON 数据。

{<span style="color: #ff0000;">
"employees"</span>:<span style="color: #0000ff;"> [
{ "firstName":"John" , "lastName":"Doe" </span>}<span style="color: #800000;">,
</span>{<span style="color: #ff0000;"> "firstName"</span>:<span style="color: #0000ff;">"Anna" , "lastName":"Smith" </span>}<span style="color: #800000;">,
</span>{<span style="color: #ff0000;"> "firstName"</span>:<span style="color: #0000ff;">"Peter" , "lastName":"Jones" </span>}<span style="color: #800000;">
]
}</span>

Sass Maps的函数

要在 Sass 中获取变量，或者对 map 做更多有意义的操作，我们必须借助于 map 的函数功能。在 Sass 中 map 自身带了七个函数：

map-get($map,$key)：根据给定的 key 值，返回 map 中相关的值。
map-merge($map1,$map2)：将两个 map 合并成一个新的 map。
map-remove($map,$key)：从 map 中删除一个 key，返回一个新 map。
map-keys($map)：返回 map 中所有的 key。
map-values($map)：返回 map 中所有的 value。
map-has-key($map,$key)：根据给定的 key 值判断 map 是否有对应的 value 值，如果有返回 true，否则返回 false。
keywords($args)：返回一个函数的参数，这个参数可以动态的设置 key 和 value。

RGB颜色函数-RGB()颜色函数

在 Sass 的官方文档中，列出了 Sass 的颜色函数清单，从大的方面主要分为 RGB , HSL 和 Opacity 三大函数，当然其还包括一些其他的颜色函数，比如说 adjust-color 和 change-color 等。

RGB 颜色只是颜色中的一种表达式，其中 R 是 red 表示红色，G 是 green 表示绿色而 B 是 blue 表示蓝色。在 Sass 中为 RGB 颜色提供六种函数：

rgb($red,$green,$blue)：根据红、绿、蓝三个值创建一个颜色；
rgba($red,$green,$blue,$alpha)：根据红、绿、蓝和透明度值创建一个颜色；
red($color)：从一个颜色中获取其中红色值；
green($color)：从一个颜色中获取其中绿色值；
blue($color)：从一个颜色中获取其中蓝色值；
mix($color-1,$color-2,[$weight])：把两种颜色混合在一起。

HSL函数简介

在 Sass 中提供了一系列有关于 HSL 的颜色函数，以供大家使用，其中常用的有 saturation、lightness、adjust-hue、lighten、darken 等等。

hsl($hue,$saturation,$lightness)：通过色相（hue）、饱和度(saturation)和亮度（lightness）的值创建一个颜色；
hsla($hue,$saturation,$lightness,$alpha)：通过色相（hue）、饱和度(saturation)、亮度（lightness）和透明（alpha）的值创建一个颜色；
hue($color)：从一个颜色中获取色相（hue）值；
saturation($color)：从一个颜色中获取饱和度（saturation）值；
lightness($color)：从一个颜色中获取亮度（lightness）值；
adjust-hue($color,$degrees)：通过改变一个颜色的色相值，创建一个新的颜色；
lighten($color,$amount)：通过改变颜色的亮度值，让颜色变亮，创建一个新的颜色；
darken($color,$amount)：通过改变颜色的亮度值，让颜色变暗，创建一个新的颜色；
saturate($color,$amount)：通过改变颜色的饱和度值，让颜色更饱和，从而创建一个新的颜色
desaturate($color,$amount)：通过改变颜色的饱和度值，让颜色更少的饱和，从而创建出一个新的颜色；
grayscale($color)：将一个颜色变成灰色，相当于desaturate($color,100%);
complement($color)：返回一个补充色，相当于adjust-hue($color,180deg);
invert($color)：反回一个反相色，红、绿、蓝色值倒过来，而透明度不变。

<span style="color: #800000;">hsl(200,30%,60%) //通过h200,s30%，l60%创建一个颜色 #7aa3b8
hsla(200,30%,60%,.8)//通过h200,s30%，l60%,a80%创建一个颜色 rgba(122, 163, 184, 0.8)
hue(#7ab)//得到#7ab颜色的色相值 195deg
saturation(#7ab)//得到#7ab颜色的饱和度值 33.33333%
lightness(#7ab)//得到#7ab颜色的亮度值 60%
adjust-hue(#f36,150deg) //改变#f36颜色的色相值为150deg #33ff66
lighten(#f36,50%) //把#f36颜色亮度提高50% #ffffff
darken(#f36,50%) //把#f36颜色亮度降低50% #33000d
saturate(#f36,50%) //把#f36颜色饱和度提高50% #ff3366
desaturate(#f36,50%) //把#f36颜色饱和度降低50% #cc667f
grayscale(#f36) //把#f36颜色变成灰色 #999999
complement(#f36) //#33ffcc
invert(#f36) //#00cc99</span>

Opacity函数简介

在 CSS 中除了可以使用 rgba、hsla 和 transform 来控制颜色透明度之外，还可以使用 opacity 来控制，只不过前两者只是针对颜色上的透明通道做处理，而后者是控制整个元素的透明度。

在 Sass 中，也提供了系列透明函数，只不过这系列的透明函数主要用来处理颜色透明度：

alpha($color) /opacity($color)：获取颜色透明度值；
rgba($color, $alpha)：改变颜色的透明度值；
opacify($color, $amount) / fade-in($color, $amount)：使颜色更不透明；
transparentize($color, $amount) / fade-out($color, $amount)：使颜色更加透明。

自定义函数简介

上面的一些函数可以说比较鸡肋或者话说在平时可能我们用不到，那么除了使用@mixin来进行一些操作以外，自定义函数是一个很好的选择，并且在做插件时是十分有用的。

<span style="color: #800000;">$oneWidth: 10px;  
$twoWidth: 40px;  
  
@function widthFn($n) </span>{<span style="color: #ff0000;">  
  @return $n * $twoWidth + ($n - 1) * $oneWidth;  
</span>}<span style="color: #800000;">  
  
.leng </span>{<span style="color: #ff0000;">   
    width</span>:<span style="color: #0000ff;"> widthFn(5)</span>;  
}

其实市场上有一些比较好的sass库。这里推荐一下一个sass基础库Sandal以及基于Sandal（基础sass库）扩展的移动端UI库sheral。