Sass 基本構文_html/css_WEB-ITnose

Sass は CSS3 言語の拡張機能であり、CSS に基づいた新しい機能と構文を追加し、より優れたスタイル シートを簡単に作成できるようにします。 Sass エンジンは Ruby に基づいています。

Sass ファイルのインポート:

@import "colors" //colors.scss

コメント:

//这种注释不会出现在生成的css文件中/*这种注释内容会出现在css文件中，当当出现在原生CSS不允许的未知，则这些注释会被抹掉*/

変数>>

-->変数宣言

//注意：变量中下划线和中划线表示同一个变量<br />$flower-color:#abcdef;      //flower-color是一个变量，其值现在是#abcdef$basic-border:1px solid black;    //任何可以用作CSS属性值的赋值都可以作为SASS的变量值$basic-font:"MyriadPro"、Myriad、"helveticaNuue"、Helvetica；//也可以是逗号分割的多个属性值//与CSS属性不同，变量可以在CSS会泽块定义之外使用。当变量定义在CSS规则块内，那么该变量只能在其子级规则块内使用。<br />$nav-color:#dadada;nav{    $width:100px;    width:$width;    color:$nav-color;}

- ->変数参照

全CSSの標準値プロパティ 変数が存在できる場所であればどこでも、変数は便利です。

$flower-color:red; //变量声明.flower{ //变量引用      border:1px $flower-color solid;}

ネストルール>>

-->基本的なネストルールはいくつかのプログラミング言語に非常に似ており、グループセレクターのネストもCSS構文と同じです

//CSS 代码，经常重复写选择器#content article h1{color:#333}#contetn article p{margin-bottom:1.5em;}#cojntent aside{background-color:#eee;}//SASS代码，选择器嵌套#content{    article{        h1{color:#333}        p{margin-bottom:1.5em}    }    aside{background-color:#eee;}}

。 -->親セレクターの識別子&

article a{    color:blue;    &:hover{color:red}    //必须标识父选择器&，否则SASS无法正常工作}//CSS 代码article a{color:blue}article a:hover{color:red}

-->子の組み合わせセレクターと同じレベルの組み合わせセレクター:> + ~

これらのセレクターは、ブラウジングを定式化するために他のセレクターと併用できる必要があります。セレクターは、内部の要素のみを選択します。特定のコンテキスト。これらのセレクターは、Sass ルールを使用してネストできます。

article section{margin:5px;}//用子组合选择器>选择一个元素的直接子元素article>section{border:1px red solid}

//同层相邻组合选择器+选择元素紧跟着的元素header + p {font-size:1.1em}

//同层全体组合选择齐齐~，选择跟在元素后的同层元素，不管他们之间间隔了多少其他元素article ~ article {border:1px solid red;}

-->ネストされた属性

セレクターに加えて、属性もネストできます。

nav{    border:1px solid #ccc{        left:0px;        right:0px;    }}

属性やセレクターをネストすることで出血量は大幅に削減できますが、スタイルシートがどんどん大きくなると、この書き方では構造を明確に保つのが難しくなります。また、多数のスタイルを処理する唯一の方法は、スタイルを複数のファイルに分割することです。

ミキサー>>

@mixin corners{ //用@mixin标识符定义    -moz-border-radius:5px;    -ms-border-radius:5px;    -webkit-border-radius:5px;;    -o-border-radius:5px;    border-radius:5px;}.calamus{    border:2px solid red;    @include corners;       //用@include调用混合器中的所有样式}//混合器中不仅可以包含css规则还可以包含属性，也可以嵌套//混合器可以传递参数@maxin link-colors($normal,$hover){    color:$normal;    &:hover{color:$hover}}a{    @include link-colors(blue,red);  //参数的传递}

継承>>

実装者: @extend

.error{    border:1px solid red;    color:red;}.seriousError{    @extend .error;      //继承error的属性值   width:300px;}