Sass 入門tutorial_html/css_WEB-ITnose

CSSは不快

CSSを書くのはとても面倒でメンテナンスが難しいです。

CSS プリプロセッサ

そこで、CSS にプログラミング要素を追加しました。これが「CSS プリプロセッサ」です。

Sass vs Less

最もよく知られた CSS プリプロセッサは Sass と Less です。多くの CSS プリプロセッサの中でどれが最適ですか? 最も短い答えは、Sass です。

Sass の紹介

Sass は Ruby で書かれていますが、Ruby の構文とは何の関係もないため、Sass を学ぶために Ruby を学ぶ必要はなく、Ruby をインストールするだけで済みます。

Sass は CSS3 の拡張機能であり、CSS3 のスーパーセットです。

Ruby をインストールする

先ほども言いましたが、Sass は Ruby で書かれているため、最初に Ruby をインストールしてください。Ruby 公式 Web サイトのダウンロード アドレスは https://www.ruby-lang.org/ です。 ja /documentation/installation/。

Ruby が正常にインストールされているかどうかを確認します:

ruby -v

または

ruby --version

Sass をインストールします

次のコマンドを入力します:

gem install sass

インストールが成功したかどうかを確認します:

sass -v

または

sass --version

Sass バージョンをアップグレードします:

gem update sass

Sass 構文

2 つの構文形式

1 つは拡張子として .sass を使用するもので、この構文はスペースを区別し、中括弧やセミコロンを必要としません:

#div    width: 100px    height: 200px

もう 1 つは拡張子として .scss を使用するもので、親しみやすいものです。中括弧とセミコロン:

#div {    width: 100px;    height: 200px;    }

どの構文を選択しますか?もちろん後者です。

コンパイル スタイル

コンパイル スタイルは 4 つあります:

(1) ネスト: ネストされたインデントされた CSS コード。これがデフォルト値です。
(2) 展開: インデントなし、展開された CSS コード。
(3) コンパクト: 簡潔な形式の CSS コード。
(4) 圧縮: 圧縮された CSS コード。

sass 001.scss 001.css --style compressed

または

sass --style compressed 001.scss 001.css

:

sass 001.scss

だけを使用すると、コンパイルされた .css 出力がコマンド ラインに表示されます。

変数

変数名は $ 記号で始まり、アンダースコアやアンダースコアを含む、CSS クラス名として使用できるすべての文字を含めることができます。

$width: 100px;#div {    width: $width;    height: 200px;    }

$width: 2px;#div {    border : $width solid red;}

変数を文字列に埋め込む必要がある場合は、変数を #{} に配置する必要があります:

$dir: top;#div {    border-#{$dir} : 2px solid red;}

変数が CSS ルール ブロック内で定義されている場合、その変数はこのルール ブロック内でのみ有効ですルールブロック。

変数名の区別できないアンダースコアとアンダースコア、つまり $link_color は $link-color と同じです:

$link-color: red;#div {    color: $link_color;}

ネスト

セレクターのネスト:

#div {    h1 {        color: red;    }    article {        p {            color: green        }    }}

コンパイル後:

#div h1 {  color: red; }#div article p {  color: green; }

親選択の識別子 &:

a {    color: red;    &:hover {        color: green;    }}

コンパイル済み:

a {  color: red; }  a:hover {    color: green; }

a {    color: red;    p & {        color: green;    }}

コンパイル済み:

a {  color: red; }  p a {    color: green; }

グループセレクターのネスト:

aritcle {    h1, h2, h3, h4 {color: #ccc}}

コンパイル済み:

aritcle h1, aritcle h2, aritcle h3, aritcle h4 {  color: #ccc; }

aritcle, aside {    h1, h2 {color: #ccc}}

コンパイル済み:

aritcle h1, aritcle h2, aside h1, aside h2 {  color: #ccc; }

組み合わせセレクター: > + ~、を使用する必要はありません。親セレクターの識別子 &; は、外側のセレクターの後または内側のセレクターの前で使用できます:

aritcle {    > section {color: red}    + section {color: green}    ~ section {color: blue}    dl > {        dt {color: #ccc}        dd {color: #666}    }}

コンパイル後:

aritcle > section {  color: red; }aritcle + section {  color: green; }aritcle ~ section {  color: blue; }aritcle dl > dt {  color: #ccc; }aritcle dl > dd {  color: #666; }

属性も埋め込むことができます ネスト、ネストのルールは次のとおりです: 属性名を切断するには「:」を使用します途中から「-」で、ルート属性の後にコロンを付けて「{}」ブロックを追加し、「{ }」ブロック内にサブ属性部分を書きます:

nav {    margin: {        top: 10px;        left: 5px;    }}

Compiled:

nav {  margin-top: 10px;  margin-left: 5px; }

nav {    margin: 15px {        top: 10px;        left: 5px;    }}

コンパイル:

nav {  margin: 15px;    margin-top: 10px;    margin-left: 5px; }

@import

Sass は @import を書き換えます。ネイティブ CSS は、@import が実行された場合にのみ、インポートされた CSS ファイルをダウンロードします。 Sass の @import は、CSS ファイルを生成するときに関連ファイルをインポートします。

Sass の @import を使用する場合、インポートされるファイルの拡張子を指定する必要はありません。つまり、.scss または .sass を省略できます。

Sass では、CSS ルール内で @import を記述することができます。

Sass には、対応する独立した CSS ファイルを生成する必要がなく、@import としてのみ記述される Sass ファイルの場合、部分ファイルをインポートする場合、部分ファイル名がアンダースコアで始まります。アンダースコアは省略できます。

CSS ネイティブ @import は、次の 3 つの状況で使用されます:

(1) インポートされたファイル名は .css で終わります

(2) インポートされたファイル名は、http://www などの URL アドレスです。 . xxx.com/style/xxx.css;

(3) インポートされたファイル名は CSS の url() 値です。

!default

!default は変数に使用されます。その意味は、この変数が宣言されて値が割り当てられている場合は、その宣言された値を使用し、それ以外の場合はこのデフォルト値を使用します:

$width: 10px;$width: 20px !default;$height: 10px;$height: 20px;#div {    width: $width;    height: $height;}

コンパイル後:

#div {  width: 10px;  height: 20px; }

コメント

CSS 標準形式のコメントは、/* ... */ です。

Sass にはサイレント コメント: // コメント コンテンツと呼ばれるコメントもあります。このようなコメントは、生成された CSS ファイルには表示されません。

Mixer

変数は特定の値を再利用するためのもので、ミキサーはスタイルの大部分を再利用できます。

ミキサーは @mixin 識別子を使用して定義され、@include はこのミキサーを参照するために使用されます。

@mixin rounded-corners {       -moz-border-radiux: 5px;    -webkit-border-radius: 5px;            border-radiux: 5px;}#div {    color: red;    @include rounded-corners;}

コンパイル後:

#div {  color: red;  -moz-border-radiux: 5px;  -webkit-border-radius: 5px;  border-radiux: 5px; }

ミキサーで CSS ルールを使用することもできます:

@mixin rounded-corners {       -moz-border-radiux: 5px;    -webkit-border-radius: 5px;            border-radiux: 5px;    a {        color: red;    }    & span {        color: blue;    }}#div {    color: red;    @include rounded-corners;}

コンパイル後:

#div {  color: red;  -moz-border-radiux: 5px;  -webkit-border-radius: 5px;  border-radiux: 5px; }  #div a {    color: red; }  #div span {    color: blue; }

ミキサーにパラメーターを渡すことができ、パラメーターにはデフォルト値を指定できます。

#div {  color: red;  -moz-border-radiux: 10px;  -webkit-border-radius: 10px;  border-radiux: 10px; }  #div a {    color: green; }  #div span {    color: red; }

     

     

选择器继承

选择器继承是指一个选择器可以继承另一个选择器定义的样式，继承使用 @extend 。

.error {    color: red;    font-size: 16px;}.syntax {    background-color: blue;    @extend .error;}

编译后：

.error, .syntax {  color: red;  font-size: 16px; }.syntax {  background-color: blue; }

     
     

表达式

只要能放在属性右边的都可以称为表达式，如一个简单的值 bold 或 5px，也可以是值的列表 2px solid #ccc。

表达式中不仅能包含变量，还可以包含数学运算符。

     

数据类型

CSS 属性或 Sass 变量中的每个值都有一个类型，类型不同，动作方式也不同，Sass 能理解所有的这些类型。

     

字符串

包括 无引号字符串 和 有引号字符串，bold、auto、center 属性于无引号字符串，"microsoft yahei" 属于有引号字符串。

字符串连接运算符是："+"。如果两个字符串都是无引号字符串，则结果也是无引号字符串；如果两个字符串都是有引号字符串，则结果也是有引号字符串；如果一个是有引号字符串，一个是无引号字符串，则结果与是否有引号取决于左边的字符串。

div + p    divp"div" + p    "divp"div + "p"    divp

     
     

数值

数值包括两部分：实际的数值及单位。

当对带有单位的数值做乘法和除法运算时，单位也一起做乘法和除法运算，如：

5em*4px    20em*px16px/1em    16px/em

这有什么用呢？可以用在单位转换，如 16px/em 代表 1em 是 16px。

对带单位的数值做加法或减法运算时，Sass 会自动转换，否则如果不能转换则出错。      
还可以使用取模运算：%。

除法 “/” 有些特殊，因为 "/" 即可以表示除法，也可以表示一个普通斜杠，以下三个情况满足任何一个都会使用除法：

（1）在 / 的任意一边使用一个变量；

（2）整个值被小括号包围；

（2）该值被用作其他算术表达式的一部分。

$var: 1px; $var/2px;(1px/2px);1 + 1px/2px;

     
     

颜色

不论最初的颜色值以何种形式表示，Sass 内部会同时使用 RGB 和 HSL 来表示颜色。

     

列表

列表是一个数值的序列，用来表示 border、font等属性，如 2px solid #ccc，也可以是以逗号隔开。

算术运算符对列表没什么用。

布尔值

布尔值只有两种：true 和 false。

布尔值不使用算术运算符，它们有自己的操作符：and、or 和 not。

返回布尔值的操作符：

<<=>>===

对于小于和大于，只用于数字；对于 == 则可以用于全部类型。      
     
     

函数

和 CSS 函数不同，Sass 函数可以使用关键字变量，这意味着不是通过参数顺序来指明参数，而是可以显示地命名几个或者所有的变量：

rgb($green: 127, $blue: 127, $red: 255)

数值函数

（1）abs($number)    取$number的绝对值；

（2）ceil($number)    $number向上取整；

（3）floor(($number)    $number向下取整；

（4）round($number)    $number四舍五入；

（5）percentage($number)    将小数$number转换为百分数；

（6）comparable($number1, $number2)    $number1和$number2是否能比较；

（7）unit($number)    返回$number的单位；

（8）unitless($number)    返回$number是否没单位。

     

颜色函数

（1）alpha($color)/opacity($color)    返回$color的alpha通道；
（2）blue($color)    返回$color的蓝色通道；
（3）green($color)    返回$color的绿色通道；
（4）red($color)    返回$color的红色通道；
（5）hue($color)    返回$color的色度属性；
（6）lightness($color)    返回$color的亮度属性；
（7）saturation($color)    返回$color的饱和度属性；
（8）complement($color)    返回$color色环与与$color的互补；
（9）grayscale($color)    返回$color的灰度版本；
（10）invert($color)    返回$color的反相版本；
（11）mix($color1, $color2, [$weight])    按照$weight的百分比将$color1和$color2混合在一起；
（12）$adjust($color, ...)    按照给定的的颜色成分调整$color的各个属性；
（13）$scale($color, ...)    按照百分比调整$color的各个属性；
（14）$set($color, ...)    将$color的各个属性设置为固定值。
     

     

列表函数

（1）nth(a b c, $n)    返回列表第$n个值；
（2）join($list1, $list2, [$separator])    将两个列表连接起来，如果没有$separator，则分隔符以第一个为准；
（3）length($list)    返回$list列表中项目的个数。
     

     

其他函数

（1）type-of($value)    返回一个无符号字符串，代表$value的类型，可以是：number、string、color、bool、list；
（2）if($condition, $if-true, $if-false)    就像三元运算符，如果$condition为true，则返回$if-true，否则返回$if-false。

     

自定义函数

使用 @function 指令自定义函数，每个 @function 必须返回一个结果。

@function width($w) {    @return $w * 100px;}

     

     

控制指令

@for

@for 指令用来计数，有两种语法：

（1）@for $i from to

（2）@for $i from through

@for $i from 1 to 5 {    .box-#{$i} {        width: 100px * $i;    }}

编译后：

.box-1 {  width: 100px; }.box-2 {  width: 200px; }.box-3 {  width: 300px; }.box-4 {  width: 400px; }

@for $i from 1 through 5 {    .box-#{$i} {        width: 100px * $i;    }}

编译后：

.box-1 {  width: 100px; }.box-2 {  width: 200px; }.box-3 {  width: 300px; }.box-4 {  width: 400px; }.box-5 {  width: 500px; }

可以看出这两种语法的差异在于要不要包括最后一个数字。

@each

@each 指令多次重复一个样式块。

@each $item in home, about, archive {    nav .#{$item} {        background-image: url(/images/#{$item}.png);    }}

编译后：

nav .home {  background-image: url(/images/home.png); }nav .about {  background-image: url(/images/about.png); }nav .archive {  background-image: url(/images/archive.png); }

@each 指令中的列表可以用逗号分开，也可以用空格分开。        
       
       

@if @else

@if 指令用来控制一个样式块是否使用，其中也可以与 @else if 及 @else指令配合使用。

$flag: 2;.nav {    @if $flag == 1 {        width: 100px;    } @else if $flag == 2 {        width: 200px;    } @else {        width: 300px;    }}

编译后：

.nav {  width: 200px; }

       

参考

（1）《Sass与Compass实战》

（2）  http://www.ruanyifeng.com/blog/2012/06/sass.html