SASS 使用ガイド_html/css_WEB-ITnose

ただ見るだけではダメ、時間が経つと忘れてしまうので記録しておきましょう。

まず、Windows は私にとって切り離せないものであるため、環境は依然として Windows です。 SassをCSSファイルにコンパイルし、Ruby環境を与えるだけです。

Windows 用の Rubyinstaller をダウンロードしてインストールするだけです。必ず環境変数を設定してください。

たとえば、E:Ruby22-x64bin がシステム環境変数パスに設定されます

cmd コマンドライン実行 Ruby -v 正しければ、インストールと設定は正しいです

次のステップは、次のステップを使用します。 gem を使って Sass をインストールしてください 一般的なアプローチそれは直接です

gem install sass

しかし、多くの場合、レポートは間違っています。おそらく国内ネットワークが貧弱すぎてブロックされています。 -V パラメータを通じて特定の情報を確認できます

一般的に言えば、淘宝網チームはたくさんのミラーを提供しています、見てみてください~

簡単なコマンドを使ってソースを切り替えてください

gem sources --remove https://rubygems.org/gem sources -a https://ruby.taobao.org/gem sources -l*** CURRENT SOURCES ***https://ruby.taobao.org# 请确保只有 ruby.taobao.org gem install rails

sassが正常にインストールされました、まずは体験してみましょう~

sass ディレクトリに新しい test.scss ファイルを作成し、いくつかの文を書きます。それを実行して確認してください。

sass test.scss test.css を使用すると、scss ファイルを CSS ファイルに直接コンパイルできます

2. SASS の使用法:

上記の例の test.scss ファイルのように、次のことができます。コンパイルされた CSS コードのスタイルを定義します。

*nested: ネストされたインデントされた CSS コード、デフォルト値です。

* Expanded: インデントされていない、展開された CSS コード。 * Compact: 簡潔な形式の CSS コード。

* 圧縮: 圧縮された CSS コード。

監視ファイルの変更を直接定義し、scss ファイルを変更することもでき、CSS も同時に更新されます

次に、sass の構文について話しましょう

1. like css のように、

div{width:50px;}

2. 変数を使用します。デフォルトの変数値を定義したい場合は、最後に !default を追加します。

変数を文字列に配置する場合は、 #{} を使用して、計算関数

を使用できます。 Sass はセレクターをネストして階層関係を表すことができ、これはエレガントできれいに見えます。親クラスを使用する場合は、一般的な a:hover

$width: 500px;$height: 300px !default;$side: right;div{     border-#{$side}-width: $width / 5;}  |  |  |div {  border-right-width: 100px;}

などのアンパサンドを使用します。 4. Mixins.

は、マクロ/関数を定義して、必要に応じて

$width: 500px;div{    width: $width;    .answer a{         &:hover{text-decoration:none;}    }}    |    |    |div {  width: 500px;}div .answer a:hover {  text-decoration: none;}

を呼び出すのと似ています

5. 他の scss または css ファイルをインポートする @import、インポートされた scss ファイルは自動的にコンパイルおよび展開され、インポートされた css はそのまま配置されます

// *.scss$width: 500px;@mixin right($color: '#0f0'){     font-weight: bold;    color: $color;}div{    width: $width;    .answer{         @include right();    }}//---------------------------------------// *.cssdiv {  width: 500px;}div .answer {  font-weight: bold;  color: "#0f0";}

6. @extend

を使用して継承/拡張します。

7. カラー関数、sass には明るくする、暗くする、色のグラデーションなど、多くの組み込みカラー関数

があります。

例:

lighten(#cc3, 10%) // #d6d65c

darken(#cc3, 10%) // #a3a329

grayscale(#cc3) // #808080

complement(#cc3) // # 33c その他のカラー関数

8. あまり一般的には使用されないその他のメソッド

1] 変数は、配列と同様に複数の値を持つこともできます

//test.scss$width: 500px;div{    width: $width;    .answer a{         &:hover{text-decoration:none;}    }}@import './test1.css';@import './test1.scss';p{width: $width / 10;}//test1.cssp.new{    color: red;}//test1.scss$width: 200px;#nav{     width: $width;}//最后，test.css  可以看到，$width变量的值已经更新@import url(./test1.css);div {  width: 500px;}div .answer a:hover {  text-decoration: none;}#nav {  width: 200px;}p {  width: 20px;}

2] マップをキーとして使用できます -Value関係は @each を使用してトラバースされます (PHP 構文に似ています)

// *.scss$width: 100px;.block{     color: #333;    border-left: 1px;}.block-1{     @extend .block;    width: $width / 2; }.block-2{     @extend .block-1;    background-color: green;}//  *.css.block, .block-1, .block-2 {  color: #333;  border-left: 1px;}.block-1, .block-2 {  width: 50px;}.block-2 {  background-color: green;}

3] セレクターのネスト @at-root から抜け出します ただし、メディアのネスト (たとえば @media ) から抜け出したい場合は、これを使用することはほとんどありません。 block-1 {}、メディアを選択|all

構文は @at-root (: type なし) です。タイプは、all (すべて)、rule (通常の CSS、デフォルト)、media (メディア)、support (サポート) の 4 つです。 ) ...