1.サスとSCSS
SASSとSCSSは、実際には同じものです、我々は通常、サスを呼び出す必要があります。SCSSサス3は、新しい文法の導入である、構文は、CSS3と完全に互換性があり、そしてサスの強力な機能を継承しています。つまり、任意の標準CSS3スタイルシートが有効なSCSSファイルが同じ意味を持っています。
以下の2点間の違いがあります。
- ファイルの拡張子異なる、サスは「.sass」サフィックスの拡張機能で、SCSSは「.scss」サフィックスの拡張機能です
- 執筆の異なる文法的な方法、サスがされて厳密にインデント、書き込みに文法規則を括弧なし（{}）とセミコロン（;） 、およびSCSS文法と私たちのCSSの構文記法を書くことは非常に似ています。
例：
// Sass 语法
$w:200px; //定义变量
$h:300px; //定义变量 body width:$w; height:$h;// Scss 语法
$w:200px;
$h:300px; body{ width:$w; height:$h; }/* 编译出来的css*/
body{
width:200px;
height:300px; }2.サス/ SCSS和のCss
-
サスとCSS
SASSとサスが書き込みにルビーをもとに、そうその継続Rubyは仕様を書いているため、CSSの表現に多少の違いは、確かにそこにあります。サスを書くには、中括弧とセミコロンなしで主に依存して、厳格なインデント制御。
-
SCSSとCSS
公共サスの対象となるに違いを、書いていないSCSSとCSSは、より多くの理由の一つのようです。簡単に言えば、直接「.scss」に変更され、既存の「の.css」ファイルを使用することができます。
インストール
マックシステム
1. Rubyのインストール
ルビー、オープン端末入力をインストールするかどうかを確認します
ruby -v。
- そこルビー情報 - インストールされています。
-
何ルビー情報、使用しないで
brew install rubyインストールルビーを。リンク： ルビーをインストールします 。
2.サスのインストール
使用
sass -vビューSASSバージョンは、SASSをインストールするかどうかを確認してください。
-
オンラインインストール
- 使用する
sudo gem install sassインストールSASSを。
- 使用する
-
ローカルインストール
時々、直接コマンド上記をインストールする通常の（ネットワーク制限の理由を）できなくインストールできるようになるので、それはこのような状況になると、あなたは、以下の方法により適切に実装サスをインストールすることができますに対処するための特別なインストールする必要があります：
- ダウンロードSASSファイル、リンク： サスダウンロード 。
-
使用する
sudo gem install XXX/sass-3.7.4.gemインストールSASSを。XXX：SASSのファイルパスをダウンロードしてください。
Windowsシステム
1. Rubyのインストール
-
Rubyのインストールパッケージのダウンロードリンク： Rubyの公式サイト 。
-
ルビーをインストールし、Rubyの実行可能ファイルがPATHに追加されます
-
インストールが完了したらルビー、Rubyは、新たにスタートメニューにインストール見つけ、コマンドコントロールパネルルビー開始します
2.サスのインストール
-
オンラインインストール
-
使用する
gem install sassインストールSASSを。 -
または：使用
gem install compassコンパスでサスをインストールします。コンパスは、サスが開発したフレームワークに基づいています。また、サスを設置しながら、言い換えれば、あなたは、コンパスをインストールします。
コンパスは、サスによって開発されたフレームワークに基づいて、成熟して、書かれた数とサスミックスイン機能が統合します。
-
-
ローカル（ローカルシステムサスは、Macを通じてマウント）
テスト、更新およびアンインストールを確認します
// 查看
sass -v
// 更新
gem update sass
// 卸载
gem uninstall sass構文
1. Sassの構文
SASSの構文は、最初の構文サスが、彼は文法規則をインデントするためにTabキーで制御され、このインデントはとても厳しかったしていることをここにあります。その任意のセミコロンや中括弧が含まれていませんが。このフォーマットは、多くの場合、「.sass」拡張子のファイル名のサス古いバージョンと呼ばれています。
2. SCSS構文
SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。
【注】：
“.sass”只能使用 Sass 老语法规则（缩进规则），“.scss”使用的是 Sass 的新语法规则，也就是 SCSS 语法规则（类似 CSS 语法格式）。
编译调试
1. Sass 编译
①、命令编译
使用电脑中的命令终端，通过输入 Sass 指令来编译 Sass
-
单文件编译
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css.// ex: 有一个 test.scss 文件需需要编译 sass test.scss:test.css -
多文件编译
sass sass/:css/.上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。
-
开启“watch”功能
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css.// 单文件 sass --watch test.scss:test.css // 多文件 sass --watch sass/:css/这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：
②、GUI 界面工具编辑
推荐：Koala .
③、自动化编译(X)
2. 不同样式风格的输出方法
①、嵌套输出方式 nested
sass --watch test.scss:test.css --style nested
②、展开输出方式 expanded
输出的 CSS 样式风格和 nested 类似，只是大括号在另起一行
sass --watch test.scss:test.css --style expanded
③、紧凑输出方式 compact
sass --watch test.scss:test.css --style compact
④、压缩输出方式 compressed
压缩输出方式会去掉标准的 Sass 和 CSS 注释及空格
sass --watch test.scss:test.css --style compressed
3. 调试(X)
基本特性
基础
1. 变量
Sass 的变量包括三个部分：
- 声明变量的符号“$”
- 变量名称
- 赋予变量的值
-
默认变量
值后面加上!default 。
$color : #fff !default;sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖，覆盖的方式 - 只需要在调用该变量之前重新声明下变量即可。
-
全局变量和局部变量
定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)。
可以简单的理解成，全局变量就是定义在元素外面的变量，而定义在元素内部的变量就是局部变量 。
-
全局变量的影子
当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。
2. 嵌套
-
选择器嵌套
-
属性嵌套
避免选择器嵌套：
- 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
- 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。
-
伪类嵌套
3. 混合宏
在 Sass 中，使用“@mixin”来声明一个混合宏。
使用“@include”来调用声明好的混合宏。
-
不带参数混合宏
@mixin bdr{ -webkit-border-radius: 5px; border-radius: 5px; }@mixin 是用来声明混合宏的关键词；
bdr 是混合宏的名称；
大括号里面是复用的样式代码。 -
带参数混合宏
参数：不带值的参数、带值的参数、多个参数
有一个特别的参数“…”。当混合宏传的参数过多之时，可以使用参数来替代。// 带值的参数 @mixin bdr($radius:10px){ -webkit-border-radius: $radius; border-radius: $radius; } -
复杂的混合宏
@mixin box-shadow($shadow...) { @if length($shadow) >= 1 { @include prefixer(box-shadow, $shadow); } @else{ $shadow:0 0 4px rgba(0,0,0,.3); @include prefixer(box-shadow, $shadow); } }这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。
-
调用混合宏
-
混合宏的不足
混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。
在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。这也是 Sass 的混合宏最不足之处。
4. 扩展/继承
在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。
在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器。
5. 占位符
Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能。
他可以取代以前 CSS 中的基类造成的代码冗余的情形。
因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。
从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起，让你的代码变得更为干净。
6. 混合宏 VS 继承 VS 占位符
-
Sass 中的混合宏使用
总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。
个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
-
Sass 中继承
总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。
个人建议：如果你的代码块不需要传任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。
-
占位符
总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”
7. 插值
{}
可构建属性、选择器、@extend 中；
不能在 Sass 变量、@include 中调用。
8. 注释
-
单行注释
类似 JavaScript 的注释方式，使用“//”
在编译出来的 CSS 中不会显示
-
多行注释
类似 CSS 的注释方式，使用 ”/* ”开头，结尾使用 ”*/ ”
在编译出来的 CSS 显示
运算
1. 加/减
携带单位类型要一致。
in 是英寸。8in 即 8英寸。
1英寸约等于 2.54厘米,1英寸大约是96像素
width: 20px + 8in;
8in = 8 * 96px = 768px
即width = 20px + 768px = 788px;
2. 乘
进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。
乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错。
3. 除
规则 通 乘法运算，有一个特殊之处：“/” 符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用 “/” 符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。
p {
font: 10px/8px; // 纯 CSS，不是除法运算 $width: 1000px; width: $width/2; // 使用了变量，是除法运算 width: round(1.5)/2; // 使用了函数，是除法运算 height: (500px/2); // 使用了圆括号，是除法运算 margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算 }编译之后
p {
font: 10px/8px;
width: 500px; height: 250px; margin-left: 9px; }同じ単位値を持つ2つの値は、分割後の単位なしの値となる場合。
4.色の操作
すべてのカラー値算術サポート、およびセグメント化された操作。すなわち、赤、緑、青、別々に各セグメント計算の色です。
また、デジタルカラー値の可能な共に動作と、同じ動作がセグメント化されます。
式は次のとおりです。
05,02 = 01 + 04 + 05 = 03 + 06 = 07と09、及び合成されます。
02,02 * 01 * 2 = 04及び03 = 2 * 2 = 06、及び合成されます。
5.文字操作
「+」はサスの加算記号で文字列に接続されています。
変数の文字で接続操作を行うことに加えて、だけでなく、直接+文字によって互いに接続されました。
div {
cursor: e + -resize;
}
// 编译之后
div {
cursor: e-resize; }引用符で囲まれた文字列は、それが引用符で囲まれた文字列でない追加された場合、なお（すなわち、+記号に残っ引用文字列）は、結果は、引用符で囲まれた文字列になります。引用符で囲まれた文字列は、引用符で囲まれた文字列（+記号に残って引用されていない文字列）が付加されていない場合は同様に、結果は、引用符で囲まれた文字列ではありません。
