sass/scss_html/css_WEB-ITnose を使用して CSS の作成をすぐに始めましょう

記事著者: ソンヤン

なぜScss

CSSはプログラミング言語ではなく、単なる設定ファイルであり、命はありません。しかし、大きなプログラムである私が、自分の書いたものが動的に変更できない、カプセル化して継承できない、xxoo にできないということをどうやって許容できるでしょうか。そこで CSS 前処理という概念が生まれました。つまり、書くこととそれを使うことは別のことです。 scss は CSS 前処理のオプションであり、Ruby に依存しており、比較的高品質です。同様のものには Less などが含まれます。言語の品質に関する議論は、他の言語のいずれかをうまく使用することに似ています。

インストール

Ruby は Mac に付属しており、直接実行します:

gem install sass

対応するモジュールをインストールすると、次のコマンドを使用できます: style.scss を監視するためのコマンドは、変更されると自動的に style.css にコンパイルされます。 。

フレンドリーなリマインダー: gem を実行したとき、切断されているのかと思いました。後で聞いたところによると、私の優れた GFW 能力のおかげで、ソースを xbao のサーバーに変更して問題を解決できたそうです。

sass --watch style.scss:style.css

上記の問題の後、sass は正常にインストールされました

共通構文

変数

$ gem sources -l$ gem sources --remove https://rubygems.org/  $ gem sources -a http://ruby.taobao.org/$ gem sources -l//然后我顺手更新了一下Ruby的版本$ sudo gem update --system 

All数値型変数も使用可能です。適切な計算を行ってください。

ネスト

//定义$magin : 30px; //px$blue : #1875e7; //color$side : left; //str Usage: boder-#{$side}-radius

コメント

標準 CSS コメント /* comment */ はコンパイルされたファイルに保持されます。

単一行コメント // コメントは SASS ソースファイルにのみ保持され、コンパイル後に省略されます。

/* の後に感嘆符を追加して、これが「重要なコメント」であることを示します。圧縮モードでコンパイルする場合でも、このコメント行は保持され、通常は著作権情報を宣言するために使用できます。

継承

対応するcssを継承するには@extendを使用します:

nav {    ul {...}    border : { //注意冒号 相当于树形属性 会编译成 border-color:red        color : red;    }    a {        &:hover { color :$blue;} //&表示引用上层 会编译成 a:hover{...}    }} 

コンパイル時にCSSの順序が調整されないように注意してください。

Mixin

これは関数とマクロの非嫡子です。同様の関数を実装するには、同様のマクロを使用します。キーワードは @mixin と @include です

.class1 {    border:1px solid #ddd;}.class2 {    @extend .class1;    border-color: green;}

色処理関数

@mixin left($color, $value:10px) {    color:$color;    margin-left:$value;}.mydiv {    @include left($blue,15px);}

リンクグレー効果を作成するにはこの方法を使用してください

ファイルを紹介します

@import "style2.css";

ロジックコンパイル

実際に取得するにはどうすればよいかを考えます移動中は、判断を下し、通常の処理関数をループする必要があります。

@if は条件として単独で使用することも、@else と組み合わせて複数の条件として使用することもできます

lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c$linkColor: #08c;a {    text-decoration:none;    color:$linkColor;    &:hover{      color:darken($linkColor,10%);    }}

for ループには 2 つの形式があります。および @for $ var から $i は変数を表し、start は開始値を表し、end は終了値を表します。これら 2 つの違いは、キーワード through が数値の末尾を表すのに対し、to には数値の末尾が含まれないことです。

$type: monster;p {  @if $type == ocean {    color: blue;  } @else if $type == matador {    color: red;  } @else if $type == monster {    color: green;  } @else {    color: black;  }}

それぞれの構文は次のとおりです: @each $var in 。このうち$varは変数を表し、listとmapはリスト型データとマップ型データを表します。

@for $i from 1 through 3 {  .item-#{$i} { width: 2em * $i; }}

崇高なページング

実際、これは SCSS の知識とみなされませんが、使用すると便利です。 Sublime は画面を左右に分割することができ、ソース ファイルを左側のウィンドウに、コンパイルされたファイルを右側に配置して、検査を容易にすることができます。 Mac のショートカット キーは非常に奇妙です:

$animal-list: puma, sea-slug, egret, salamander;@each $animal in $animal-list {  .#{$animal}-icon {    background-image: url('/images/#{$animal}.png');  }}$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings {  #{$header} {    font-size: $size;  }}

左右に移動して使用します

cmd+option+ctrl+2 

この記事が役立つと思われる場合は、「いいね！」をクリックしてください。あなたは父親にならないだけでなく、父親になります。より多くの人に読んでもらいましょう...