sass_html/css_WEB-ITnose の使用を開始する

SASS は、多くの便利な記述方法を提供する CSS 開発ツールであり、デザイナーの時間を大幅に節約し、CSS 開発をシンプルかつ保守可能にします。

SASS 公式 Web サイトの紹介:

sass は世界で最も成熟しており、安定した強力なプロフェッショナル グレードの CSS 拡張言語です

公式ドキュメント:

http://sass-lang.com/documentation/file.SASS_REFERENCE .html

Sass の初心者が遭遇する最大の障害は、Ruby オペレーティング環境をセットアップする必要性とコマンドラインを使用する必要性であるかもしれません。実際、これは非常に簡単です。

1. インストール

1. Ruby をインストールします

SASS は Ruby 言語で書かれていますが、両者の構文は関係ありません。 Ruby を理解していなくても、使用できます。最初に Ruby をインストールしてから SASS をインストールするだけです。

SASS をインストールするには、SASS 公式 Web サイト: http://sass-lang.com/install を参照してください。Windows に Ruby をインストールするには:rubyinstaller.org。

インストール時に注意すべき点が 1 つあります。[PATH に Ruby 実行可能ファイルを追加する] チェックボックスをオンにし、Ruby 実行可能ファイルのパスを環境変数に追加してからインストールします。

インストールが成功したら、DOS ウィンドウで Ruby -v と入力すると、バージョン情報が表示されます。

2. sass をインストールします

Ruby が既にインストールされていると仮定して、コマンドラインに次のコマンドを入力します: gem install sass

インストールが成功したら、sass -v と入力してバージョン情報を確認します。

2. 使用

1. コンパイル

注: sass ファイル名の接尾辞は sass ではなく scss であることに注意してください。

style.scssをcssにコンパイルします

sass style.scss

style.scssをコンパイルしてcssファイルに保存します

sass style.scss style.css

style.scssをコンパイルして圧縮CSSファイルに保存します

sass <strong>--style compressed</strong> style.scss style.css

-- スタイル コントロールコンパイル スタイル、オプションのパラメーターは次のとおりです

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

expanded: インデントされていない、展開された CSS コード。

compact: 簡潔な形式の CSS コード。

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

Sass はファイルまたはディレクトリを監視し、ソースファイルが変更された場合はそれらを自動的にコンパイルします。

// watch a filesass --watch input.scss:output.css// watch a directorysass --watch app/sass:public/stylesheetss

2. 文法

2.1. コメント

less と同じように、sass には 2 つのコメントがあります

// 单行注释，不会作为最终输出/*     多行注释，以原生CSS的/*注释....*/形式作为最终输出 */

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

/*!　　　　重要注释！*/

2.2. 変数

一般に、将来再利用される色、フォント、CSS 値は、統一的な変更とメンテナンスを容易にするために変数として保存されます。

//定义变量$primary-color:#333;//变量调用body{    color:$primary-color;}

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

$side : left;.rounded{    border-#{$side}-radius:5px;}

2.3. ネスト

HTML タグのネストと同様にセレクターのネストを使用して CSS を記述しますが、CSS を生成する際には利点と欠点があります。

以下は古典的な使用法です。

nav {  ul {    margin: 0;    padding: 0;    list-style: none;  }  li { display: inline-block; }  a {    display: block;    padding: 6px 12px;    text-decoration: none;  }}

は次を生成します:

nav ul {  margin: 0;  padding: 0;  list-style: none; }nav li {  display: inline-block; }nav a {  display: block;  padding: 6px 12px;  text-decoration: none; }

属性はネストすることもできます。たとえば、border-color 属性は次のようになり、border の後にコロンを追加する必要があります。

p{   border:{        color:red;    }}

ネストされたコード ブロック内では、& を使用して親要素を参照できます。たとえば、a:hover 疑似クラスは次のように記述できます:

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

2.4、CSS フラグメントの削減と導入

目的: モジュール化と管理が便利で、小さなモジュールは保守性が優れています。最終的に CSS ファイルにコンパイルされました。これは純粋な CSS @import よりも優れています。

欠点: @import が 1 つ増えると、http リクエストが 1 つ増えることになります。

フラグメントの名前: _partial.scss、導入するには @import を使用します。

デモ: _reset.scss をbase.scss にインポートします。

_reset.scss は次のとおりです

// _reset.scsshtml,body,ul,ol {   margin: 0;  padding: 0;}

base.scss は次のとおりです

// base.scss@import 'reset';<br />body {  font: 100% Helvetica, sans-serif;  background-color: #efefef;}

@import 'reset'。

2.5、mixin 再利用コードブロック

sass で再利用コードブロックを定義でき、必要に応じて将来の呼び出しを容易にするパラメーターを渡すことができます。

定義:

@minxin name

を通じて再利用可能なスタイルを定義できます。 呼び出し:

@include name

demo:

// mixin@mixin box($H:30px,$col:red){    height:$H;    background-color:$col;}div.box{    @include box; //使用默认值}div.box1{    @include box(50px,blue); //传参}

コンパイル結果:

div.box {  height: 30px;  background-color: red; }div.box1 {  height: 50px;  background-color: blue; }

CSSにはブラウザ互換性コードがいくつかあり、CSS3プライベートプレフィックスもいくつかあります。ミックスインを使用すると非常に便利です。今回は、border-radius の典型的な例は次のとおりです。

@mixin border-radius($radius){    -webkit-border-radius: $radius;    -moz-border-radius: $radius;    -ms-border-radius: $radius;          border-radius: $radius;}.box{@include border-radius(10px);}

2.6. 継承

継承を使用すると、あるセレクターのスタイルを別のセレクターで再利用したり上書きしたりできます。これは DRY 構文であり、Sass で最も便利な構文の 1 つです。

構文: @extend selector

デモ: 一連のプロンプト メッセージ。

リーリー

编译后的css【继承实现了css组合声明】

.message, .success, .error, .warning {  border: 1px solid #ccc;  padding: 10px;  color: #333; }.success {  border-color: green; }.error {  border-color: red; }.warning {  border-color: yellow; }

2.7、运算符 

包括+，-，*，、，%。

demo:计算aside和article的宽度。 

.container{    width:100%;}article[role="main"]{    float:left;    width:600px/960px*100%;}aside[role="complimentary"]{    float:right;    width:300px/960px*100%;}

编译后css

.container {  width: 100%; }article[role="main"] {  float: left;  width: 62.5%; }aside[role="complimentary"] {  float: right;  width: 31.25%; }

2.8、颜色 

sass中集成了大量的颜色函数，让生成颜色更加简单 

lighten(#cc3, 10%) // #d6d65cdarken(#cc3, 10%) // #a3a329grayscale(#cc3) // #808080complement(#cc3) // #33c

demo:

$linkColor: #08c;a {    text-decoration:none;    color:$linkColor;    &:hover{      color:darken($linkColor,10%);    }}

编译成css

a {  text-decoration: none;  color: #08c; }a:hover {  color: #006699; }

3、高级语法 

3.1、条件 

if判断何种条件用何种样式。

p{    @if 1+1==2{border:1px solid red;}    @if 5<2 {border:2px dotted red;}}

if,else配合使用。

demo:判断颜色中亮度大于30%，设置背景色为黑色，否则为白色。

$color : #1875e7;p{    @if lightness($color)>30%{        background-color:#000;    }@else {        background-color:#fff;    }}

备注：lightness($color)：从一个颜色中获取亮度（lightness）值；

3.2、 循环语句

 for循环

@for $i from 1 to 10{    .border-#{$i}{        border:#{$i}px solid blue;    }}

编译生成如下css

.border-1 { border: 1px solid blue; }.border-2 {border: 2px solid blue; }.border-3 {border: 3px solid blue; }.border-4 {border: 4px solid blue; }.border-5 {border: 5px solid blue; }.border-6 {border: 6px solid blue; }.border-7 {border: 7px solid blue; }.border-8 {border: 8px solid blue; }.border-9 {border: 9px solid blue; }

 while循环

$i : 6;@while $i > 0{    .item-#{$i} {width:2em * $i;}    $i : $i - 2;}

编译成css

.item-6 {width: 12em; }.item-4 {width: 8em; }.item-2 {width: 4em; }

each遍历

@each $member in a,b,c,d{    .#{$member}{        background-image:url("images/#{$member}.jpg");    }}

编译成css

.a {background-image: url("images/a.jpg"); }.b {background-image: url("images/b.jpg"); }.c {background-image: url("images/c.jpg"); }.d {background-image: url("images/d.jpg"); }

3.3自定义函数

sass可自定义函数。

@function double($n){    @return $n * 2;}#sidebar{    width:double(5px);}

编译后css

#sidebar {width: 10px; }

 

资源链接： 

http://sass-lang.com/guide

http://www.w3cplus.com/sassguide/ 

 

本文作者starof,因知识本身在变化，作者也在不断学习成长，文章内容也不定时更新，为避免误导读者，方便追根溯源，请诸位转载注明出处：有问题欢迎与我讨论，共同进步。