SASS の使用法の概要_html/css_WEB-ITnose-htmlチュートリアル-php.cn

簡単な使用法:

変数

統一された変更とメンテナンスを容易にするために、sass で変数を定義できます。

//sass style$fontStack: Helvetica, sans-serif;$primaryColor: #333;body {     font-family: $fontStack;     color: $primaryColor;}//css style body {     font-family: Helvetica,     sans-serif; color: #333;}

ログイン後にコピー

ネスト

Sass はセレクターをネストして階層関係を表現することができ、これはエレガントできれいに見えます。他の Sass ファイルを Sass にインポートすると、最終的に CSS ファイルにコンパイルされます。純粋な CSS @import よりも優れています

mixin

Mixin は Sass でいくつかのコードスニペットを定義するために使用でき、将来のニーズに応じて呼び出しを容易にするためにパラメーターを渡すことができます。今後は、css3 プレフィックスの互換性を処理するのが簡単かつ便利になります。

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

ログイン後にコピー

拡張/継承

Sass は @extend を通じてコードの組み合わせ宣言を実装でき、コードをより優れた、簡潔なものにします。

//sass style//-----------------------------------@mixin box-sizing ($sizing) {    -webkit-box-sizing:$sizing;            -moz-box-sizing:$sizing;            box-sizing:$sizing;}.box-border{    border:1px solid #ccc;    @include box-sizing(border-box);}//css style//-----------------------------------.box-border {  border: 1px solid #ccc;  -webkit-box-sizing: border-box;  -moz-box-sizing: border-box;  box-sizing: border-box;}

ログイン後にコピー

Color

色の変換を簡単にするために、多数のカラー関数が sass に統合されています。

//sass style.message {  border: 1px solid #ccc;  padding: 10px;  color: #333;}.success {  @extend .message;  border-color: green;}.error {  @extend .message;  border-color: red;} .warning {  @extend .message;  border-color: yellow;}//css style.message, .success, .error, .warning {  border: 1px solid #cccccc;  padding: 10px;  color: #333;}.success {  border-color: green;}.error {  border-color: red;}.warning {  border-color: yellow;}<br />

ログイン後にコピー

演算

sass は簡単な加算、減算、乗算、除算の演算を実行できます

//sass style$linkColor: #08c;a {    text-decoration:none;    color:$linkColor;    &:hover{      color:darken($linkColor,10%);    }}//css stylea {  text-decoration: none;  color: #0088cc;}a:hover {  color: #006699;}

ログイン後にコピー

基本的な構文:

ファイル接尾辞名:

.sass (使用しないでください)中括弧とセミコロン) または .scss (中括弧とセミコロンを使用)

インポート:

ass のインポート (@import) ルールは、コンパイル時に @import の scss ファイルがマージされます。 CSS ドキュメントを 1 つだけ生成します。ただし、@import 'reset.css' などの CSS ファイルを Sass ファイルにインポートした場合、その効果は通常の CSS インポートされたスタイルファイルと同じになります。インポートされた CSS ファイルはコンパイルされたファイルにマージされませんが、存在します。 @import モードで。すべての Sass インポートファイルは、接尾辞 .scss を無視できます。一般的に、_mixin.scss のように、基本的なファイル名の付け方は _ で始まります。この種のファイルはインポート時に下線を引く必要はありませんが、 @import "mixin" と記述することができます。

コメント:

Sass には 2 つのコメントメソッドがあります。1 つは標準の CSS コメントメソッド /* */ で、もう 1 つは // ダブルスラッシュの形式の 1 行コメントですが、この 1 行コメントは翻訳されて出てきます。

変数:

Sass 変数は $ で始まり、その後に変数名が続く必要があります。値が Add の後に続く場合、変数値と変数名はコロン (:) で区切る必要があります (CSS プロパティ設定と同様)。「default」はデフォルト値を示します。 Sass のデフォルト変数は通常、デフォルト値を設定し、必要に応じて上書きするために使用されます。上書き方法も非常に簡単で、デフォルト変数の前に変数を再宣言するだけです。

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

ログイン後にコピー

特殊変数:

一般に、定義する変数は属性値であり、直接使用できますが、変数が属性として使用される場合、または特殊な場合には、 #{ $variables} 形式が使用されます。

//sass style$baseLineHeight:        2;$baseLineHeight:        1.5 !default;body{    line-height: $baseLineHeight;}//css stylebody{    line-height:2;}

ログイン後にコピー

多値変数:

は、リスト型とマップ型に分かれています。簡単に言えば、リスト型は js の配列に似ており、マップ型は js のオブジェクトに似ています。

リスト:

データは複数の値をスペース、カンマ、または括弧で区切って、nth($var,$index) を使用して値を取得できます。

rree

マップ:

map数据以key和value成对出现，其中value又可以是list。格式为： $map: (key1: value1, key2: value2, key3: value3);。可通过 map-get($map,$key)取值, 关于map数据还有很多其他函数如 map-merge($map1,$map2)， map-keys($map)， map-values($map)等

//sass style$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings {  #{$header} {    font-size: $size;  }}//css styleh1 {  font-size: 2em;}h2 {  font-size: 1.5em;}h3 {  font-size: 1.2em;}

ログイン後にコピー

全局变量：

在变量值后面加上!global

变量机制：

在选择器声明的变量会覆盖外面全局声明的变量

//sass style$fontSize:      12px;body{    $fontSize: 14px;            font-size:$fontSize;}p{    font-size:$fontSize;}//css stylebody{    font-size:14px;}p{    font-size:14px;}

ログイン後にコピー

启用global之后的机制：

默认在选择器里面的变量为局部变量，而只有设置了 !global之后才会成为全局变量。

嵌套Nesting:

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

选择器嵌套：

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用 &表示父元素选择器

//sass style#top_nav{  line-height: 40px;  text-transform: capitalize;   li{    float:left;  }  a{    display: block;    padding: 0 10px;    color: #fff;     &:hover{      color:#ddd;    }  }}//css style#top_nav{  line-height: 40px;  text-transform: capitalize; } #top_nav li{  float:left;}#top_nav a{  display: block;  padding: 0 10px;  color: #fff;}#top_nav a:hover{  color:#ddd;}

ログイン後にコピー

属性嵌套：

所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

//sass style.fakeshadow {  border: {    style: solid;    left: {      width: 4px;      color: #888;    }    right: {      width: 2px;      color: #ccc;    }  }}//css style.fakeshadow {  border-style: solid;  border-left-width: 4px;  border-left-color: #888;  border-right-width: 2px;  border-right-color: #ccc;}

ログイン後にコピー

@at-root:

sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

//sass style//没有跳出.parent-1 {  color:#f00;  .child {    width:100px;  }}//单个选择器跳出.parent-2 {  color:#f00;  @at-root .child {    width:200px;  }}//多个选择器跳出.parent-3 {  background:#f00;  @at-root {    .child1 {      width:300px;    }    .child2 {      width:400px;    }  }}//css style.parent-1 {  color: #f00;} .parent-1 .child {  width: 100px;}.parent-2 {  color: #f00;}.child {  width: 200px;}.parent-3 {  background: #f00;}.child1 {  width: 300px;}.child2 {  width: 400px;}

ログイン後にコピー

@at-root (without: ...)和@at-root (with: ...)：

默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)。这个语法的关键词有四个：all（表示所有），rule（表示常规css），media（表示media），support（表示support，因为@support目前还无法广泛使用，所以在此不表）。我们默认的@at-root其实就是@at-root (without:rule)。

//sass style//跳出父级元素嵌套@media print {    .parent1{      color:#f00;      @at-root .child1 {        width:200px;      }    }} //跳出media嵌套，父级有效@media print {  .parent2{    color:#f00;     @at-root (without: media) {      .child2 {        width:200px;      }    }  }} //跳出media和父级@media print {  .parent3{    color:#f00;    @at-root (without: all) {      .child3 {        width:200px;      }    }  }} //css style@media print {  .parent1 {    color: #f00;  }  .child1 {    width: 200px;  }} @media print {  .parent2 {    color: #f00;  }}.parent2 .child2 {  width: 200px;} @media print {  .parent3 {    color: #f00;  }}.child3 {  width: 200px;}@at-root与&配合使用：//sass style.child{    @at-root .parent &{        color:#f00;    }} //css style.parent .child {  color: #f00;}

ログイン後にコピー

应用于@keyframe:

//sass style.demo {    ...    animation: motion 3s infinite;    @at-root {        @keyframes motion {          ...        }    }} //css style.demo {    ...       animation: motion 3s infinite;}@keyframes motion {    ...}

ログイン後にコピー

混合(mixin)

sass中使用 @mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的 @mixin通过 @include来调用。

无参数mixin:

//sass style@mixin center-block {    margin-left:auto;    margin-right:auto;}.demo{    @include center-block;}//css style.demo{    margin-left:auto;    margin-right:auto;}

ログイン後にコピー

有参数mixin:

//sass style@mixin opacity($opacity:50) {  opacity: $opacity / 100;  filter: alpha(opacity=$opacity);}//css style.opacity{  @include opacity; //参数使用默认值}.opacity-80{  @include opacity(80); //传递参数}

ログイン後にコピー

多个参数的mixin: 调用时可直接传入值，如 @include传入参数的个数小于 @mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

//sass style@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){    border-bottom:$border;    padding-top:$padding;    padding-bottom:$padding; }.imgtext-h li{    @include horizontal-line(1px solid #ccc);}.imgtext-h--product li{    @include horizontal-line($padding:15px);}//css style.imgtext-h li {    border-bottom: 1px solid #cccccc;    padding-top: 10px;    padding-bottom: 10px;}.imgtext-h--product li {    border-bottom: 1px dashed #cccccc;    padding-top: 15px;    padding-bottom: 15px;}

ログイン後にコピー

多组值参数mixin: 如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如 $variables...。

//sass style//box-shadow可以有多组值，所以在变量参数后面添加...@mixin box-shadow($shadow...) {  -webkit-box-shadow:$shadow;  box-shadow:$shadow;}.box{  border:1px solid #ccc;  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));}//css style.box{  border:1px solid #ccc;  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);}

ログイン後にコピー

@content: @content在sass3.2.0中引入，可以用来解决css3的@media等带来的问题。它可以使 @mixin接受一整块样式，接受的样式从@content开始。

//sass style@mixin max-screen($res){  @media only screen and ( max-width: $res )  {    @content;  }}@include max-screen(480px) {  body { color: red }} //css style@media only screen and (max-width: 480px) {  body { color: red }}

ログイン後にコピー

PS： @mixin通过 @include调用后解析出来的样式是以拷贝形式存在的，而下面的继承则是以联合声明的方式存在的，所以从3.2.0版本以后，建议传递参数的用 @mixin，而非传递参数类的使用下面的继承 %。

继承： sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词 @extend，后面紧跟需要继承的选择器

//sass styleh1{  border: 4px solid #ff9aa9;}.speaker{  @extend h1;  border-width: 2px;} //css styleh1,.speaker{  border: 4px solid #ff9aa9;}.speaker{  border-width: 2px;}

ログイン後にコピー

占位选择器%：从sass 3.2.0以后就可以定义占位选择器 %。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了 @extend去继承相应的样式，都会解析出来所有的样式。占位选择器以 %标识定义，通过 @extend调用。

//sass style%ir{  color: transparent;  text-shadow: none;   border: 0;}%clearfix{  @if $lte7 {    *zoom: 1;  }  &:before,  &:after {    content: "";    display: table;    font: 0/0 a;  }  &:after {    clear: both;  }}#header{  h1{    @extend %ir;    width:300px;  }}.ir{  @extend %ir;}//css style#header h1,.ir{  color: transparent;  text-shadow: none;   border: 0;}#header h1{  width:300px;}

ログイン後にコピー

如上代码，定义了两个占位选择器%ir和%clearfix，其中%clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。

ps：在 @media中暂时不能 @extend @media外的代码片段，以后将会可以。

函数：

sass定义了很多函数可供使用，当然你也可以自己定义函数，以@fuction开始，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以lighten减淡和darken加深为最，其调用方法为 lighten($color,$amount)和 darken($color,$amount)，它们的第一个参数都是颜色值，第二个参数都是百分比。

//sass style$baseFontSize:      10px !default;$gray:              #ccc !defualt;        // pixels to rems@function pxToRem($px) {  @return $px / $baseFontSize * 1rem;} body{  font-size:$baseFontSize;  color:lighten($gray,10%);}.test{  font-size:pxToRem(16px);  color:darken($gray,10%);} //css stylebody{  font-size:10px;  color:#E6E6E6;}.test{  font-size:1.6rem;  color:#B3B3B3;}

ログイン後にコピー

运算： sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

$baseFontSize:          14px !default;$baseLineHeight:        1.5 !default;$baseGap:               $baseFontSize * $baseLineHeight !default;$halfBaseGap:           $baseGap / 2  !default;$samllFontSize:         $baseFontSize - 2px  !default; //grid$_columns:                     12 !default;      // Total number of columns$_column-width:                60px !default;   // Width of a single column$_gutter:                      20px !default;     // Width of the gutter$_gridsystem-width:            $_columns * ($_column-width + $_gutter); //grid system width

ログイン後にコピー

条件判断及循环：

@if 可以一个条件单独使用，也可以和@else结合多条件使用

//sass style$lte7: true;$type: monster;.ib{    display:inline-block;    @if $lte7 {        *display:inline;        *zoom:1;    }}p {  @if $type == ocean {    color: blue;  } @else if $type == matador {    color: red;  } @else if $type == monster {    color: green;  } @else {    color: black;  }} //css style.ib{    display:inline-block;    *display:inline;    *zoom:1;}p {  color: green;}

ログイン後にコピー

三目判断：

语法为： if($condition, $if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值

if(true, 1px, 2px) => 1pxif(false, 1px, 2px) => 2px<br />

ログイン後にコピー

for循环：
for循环有两种形式，分别为：@for $var from through 和@for $var from to 。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

//sass style@for $i from 1 through 3 {.item-#{$i} { width: 2em * $i; }}//css style.item-1 {width: 2em;}.item-2 {width: 4em;}.item-3 {width: 6em;}

ログイン後にコピー

@each循环：

语法为： @each $var in 。其中 $var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

单个字段list数据循环：

//sass style$animal-list: puma, sea-slug, egret, salamander;@each $animal in $animal-list {  .#{$animal}-icon {    background-image: url('/images/#{$animal}.png');  }} //css style.puma-icon {  background-image: url('/images/puma.png');}.sea-slug-icon {  background-image: url('/images/sea-slug.png');}.egret-icon {  background-image: url('/images/egret.png');}.salamander-icon {  background-image: url('/images/salamander.png');}

ログイン後にコピー

多个字段list数据循环：

//sass style$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);@each $animal, $color, $cursor in $animal-data {  .#{$animal}-icon {    background-image: url('/images/#{$animal}.png');    border: 2px solid $color;    cursor: $cursor;  }} //css style.puma-icon {  background-image: url('/images/puma.png');  border: 2px solid black;  cursor: default;}.sea-slug-icon {  background-image: url('/images/sea-slug.png');  border: 2px solid blue;  cursor: pointer;}.egret-icon {  background-image: url('/images/egret.png');  border: 2px solid white;  cursor: move;}

ログイン後にコピー

多个字段map数据循环：

//sass style$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);@each $header, $size in $headings {  #{$header} {    font-size: $size;  }} //css styleh1 {  font-size: 2em;}h2 {  font-size: 1.5em;}h3 {  font-size: 1.2em;}

ログイン後にコピー

sass编译:

命令行编译：

单文件转换：sass style.scss style.css

单文件监听：sass --watch style.scss style.css

文件夹监听：sass --watch sassFileDir:cssFileDir

css文件转换成sass/scss文件：

sass-convert style.css style.sass

sass-convert style.css style.scss

配置项：

运行命令行帮助文档，可以获得所有的配置选项： sass -h

一般常用的有--style，--sourcemap，--debug-info等：

sass --watch style.scss:style.css --style compact

sass --watch style.scss:style.css --sourcemap

sass --watch style.scss:style.css --style expanded --sourcemap

sass --watch style.scss:style.css --debug-info

- --style表示解析后的css是什么格式，有四种取值分别为：nested，expanded，compact，compressed。

// nested#main {  color: #fff;  background-color: #000; }  #main p {    width: 10em; } .huge {  font-size: 10em;  font-weight: bold;  text-decoration: underline; } // expanded#main {  color: #fff;  background-color: #000;}#main p {  width: 10em;} .huge {  font-size: 10em;  font-weight: bold;  text-decoration: underline;} // compact#main { color: #fff; background-color: #000; }#main p { width: 10em; } .huge { font-size: 10em; font-weight: bold; text-decoration: underline; } // compressed#main{color:#fff;font-weight:bold;text-decoration:underline}

ログイン後にコピー

- --sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。

- --debug-info表示开启debug信息

图形化工具gui koala

sass调试:

sass调试需要开启编译时输出调试信息和浏览器调试功能，两者缺一不可。

开启编译调试信息：

目前sass的调试分为两种，一种为开启debug-info，一种为开启sourcemap（这个将成为主流）。

如开启的是debug-info，则解析的css文件中会有以@media -sass-debug-info开头的代码，如没有则表明没有开启。

如开启的是sourcemap，则在解析的css文件同目录下生成一个.css.map的后缀名文件。

命令行开启调试：

sass --watch style.scss:style.css --debug-info

sass --watch style.scss:style.css --sourcemap

koala开启：

如下图：点击相应的文件，然后就会出现右边的编译选项，即可选择是否开启source map，debug info

开启浏览器调试：

谷歌浏览器调试：

F12打开调试面板，点击调试面板右上角的齿轮图标打开设置，在general选项中勾选Enable CSS source map 和 Auto-reload generated CSS。

开启--sourcemap编译，f12打开调试面板，就可以看到原先右边的css文件变成了我们现在的scss文件

点击scss文件，会跳到source里面的scss源文件，现在可以在里面进行修改，修改完成后可以右键选择save或save as命令，然后替换我们本地的scss源文件，刷新chrome就可以看到变化（注意，解析样式需要一定时间）。以后只要ctrl+s保存修改就可以在浏览器中看到修改效果了。

火狐浏览器调试

debug-info调试

firefox可以安装插件FireSass使用debug-info来调试。

开启--debug-info编译，f12打开firebug，就可以看到原先右边的css文件变成了我们现在的scss文件

sourcemap调试

firefox 29 将会开始支持 sourcemap，注意是火狐自带的调试功能，而不是firebug。

--sourcemap コンパイルをオンにし、[要素の表示] を右クリックして Firefox 独自のデバッグ機能を使用し、デバッグパネルを開き、スタイルを右クリックして [元のソースを表示] を選択します。

scss ファイルをクリックすると、scss ファイルにジャンプします。以下に示すように:

次に、変更を加えます。変更後、[保存] または [ctrl+s] をクリックして、保存したい場所にポップアップ表示され、ローカルソースファイルを直接上書きします。わかりました。

sass ライブラリ:

1.sassCore

sassCore はコアファイルと拡張ファイルの 2 種類に分かれています。コアファイルは、簡単に呼び出すためのいくつかの基本スタイルと @mixin、% などを提供します。一方、拡張ファイルは、フォーム、テーブルなどのいくつかのモジュールスタイルを提供します。

コアファイルの呼び出し:

1.基本関数の場合、リセットスタイル @import "d:/sassCore/base" が生成されます

2. スタイルは生成されず、関数呼び出し @import "d:/sassCore/function" のみが提供されます

拡張ファイル呼び出し:

オンデマンド呼び出し: @import "d:/sassCore/ext/table"

注: sass はオンラインの sass ファイルをインポートできず、sassCore はインストールバージョンを提供しないため、デフォルトでは呼び出し用に D ドライブに配置されます。

特徴:

1 .sassCore は幅広いトピックをカバーします。コアファイルには設定、css3、メディアクエリ、ミックスイン、グリッド、リセットが含まれ、拡張ファイルにはアニメーション、フォントフェイス、btn、メッセージ、フォーム、テーブル、ヘルプ、およびタイポグラフィが含まれます。さらに、2 つのコレクションファイルがあります。機能とベース。

2.sassCore は互換性のためにスイッチ制御メカニズムを採用しています。たとえば、ie6/7 をサポートするかどうかを true または false に設定して、対応するコードを生成できます。

3.sassCore はスタイルの冗長性と煩雑さを厳密に制御します。スイッチ変数を使用して必要なスタイルをロードし、オンデマンドで有効にして、冗長で煩雑なスタイルを回避します。

4. sassCore は 2 つの呼び出しメソッドを設計しました。1 つは、冗長な CSS コードを生成せずに関数のみを呼び出すことです。もう 1 つは、いくつかのリセットスタイルを含めることです。チームの協力と開発のための優れたソリューションを提供します。

5.- sassCore は優れた作品を参考にし、実際の戦闘に基づいて新しいメソッドを作成し、最先端を追い続けます。すべてのドキュメントは慎重に検討され、何度も改訂され、実用性と卓越性を追求します。

命名規則:

変数と @function はキャメルケースで記述されます @mixin % はアンダースコアを使用します

ファイルの説明:

sassCore には 2 つのコレクションファイル (base、function) と 2 つのフォルダー (core、ext) が含まれます。 core フォルダーには、設定、css3、メディアクエリ、ミックスイン、グリッド、リセットなどのコア基本ファイルが含まれ、一方 ext フォルダーには、アニメーション、フォントフェイス、btn、メッセージ、フォーム、テーブル、タイポグラフィ、ヘルパーなどの拡張ファイルが含まれています。。

2 つのコレクションファイル (base、function) はコアにファイルをインポートしますが、base は基本的な関数を提供するだけでなく、リセットスタイルも生成しますが、function は基本的な関数のみを提供するという点が異なります。 ext 内のファイルに関しては、追加のモジュール拡張子に属しており、必要に応じてインポートできます。

コアファイル

設定

一般的に使用される色、フォント、その他の変数などの基本的な変数を担当するファイル。

css3

css3 属性プレフィックスを担当するファイル。

media-queries

レスポンシブ幅の判定を担当するファイル。主に、paranoida の sass-mediaqueries からの、レスポンシブレイアウトに関する幅の判断です。

mixin

機能ファイルを担当します。これは大きく 3 つの部分に分かれており、1 つはミキシング部分 (mixin)、もう 1 つはプレースホルダーセレクター部分 (%)、そして最後が関数部分です。もちろん、一般的に使用される include と extend はここから来ています。

グリッド

グリッドシステムのファイルを担当します。デフォルトは固定幅レイアウト (1000px) です。 $gridPercentSwitch を true に設定することで、流動的なレイアウトに切り替えることができます。また、$gridSpanSwitch を true または false に設定することで、各グリッドのクラスを出力するかどうかを制御できます。

リセット

正規化をベースに、皆さんの現在の使用習慣に合わせていくつかのリセット操作を実行し、文字のフォントの色や印刷スタイルを出力するかどうかを設定しました。

ext ファイル

animate

animate.css を scss バージョンに変換します。デフォルトでは、アニメーションが必要な場合は、最初に対応するアニメーションファイルをインポートしてから、呼び出しを含めます。

font-face

Font Awesome のフォントアイコンデフォルトでは、実際のニーズに応じて出力されるクラスはありません。 Desert の font-awesome モジュールを参照します

btn

ボタン用に設計されたファイル。ボタンのカスタマイズに使用できる一連のミックスインを定義します。デフォルトで 2 種類のボタンが生成されます

メッセージ

インタラクティブなプロンプト情報。、警告とエラー、成功、4 つのステータスプロンプトを含む

フォーム