SASS についての学習のまとめ

はじめに

SASS は CSS プリプロセッサです。その基本的な考え方は、特殊な プログラミング言語 を使用して Web ページのスタイルをデザインし、それを通常の CSS ファイルにコンパイルすることです。

SASS は 4 つのコンパイル スタイル オプションを提供します:

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

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

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

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

ファイルをインポート

@import コマンド。外部ファイルをインポートするために使用されます。

@import "path/filename.scss";

.cssファイルをインポートする場合は、css importコマンドと同等です。

コメント

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

1 変数

SASSでは、$

で始まるすべての変数の使用が許可されます。通常の変数

は、定義後にグローバルスコープで使用できます。

デフォルト変数

sass のデフォルト変数は、値の後に !default を追加するだけです。

Sass のデフォルト変数は、デフォルト値を設定するために使用され、必要に応じて上書きする方法も非常に簡単です。デフォルト変数の前に変数を再宣言するだけです。変数はコンポーネント化されており、開発時に非常に役立ちます。

特殊変数

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

多値変数

多値変数はリスト型と

マップ

型に分けられます。簡単に言えば、リスト型はjsの配列に似ています。 js 変数の objectglobal

変数値の後に !global を追加すると、グローバル変数になります。これはまだ利用できませんが、Sass 3.4 以降のバージョンで正式に使用される予定です。現在の Sass の

変数スコープ

が批判されているため、このグローバル変数が作成されています。 2 ネスト

Sass には 2 つのタイプのネストがあります。1 つはセレクターのネストで、もう 1 つは属性のネストです。私たちが通常話したり使用したりするのは、セレクターのネストです。

セレクターのネストでは、& を使用して親

要素セレクターを表すことができます

属性のネスト: いわゆる属性のネストとは、

border-width

、border- など、一部の属性が同じ開始単語を持つことを意味します。色すべては境界線から始まります。

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

@at-root: sass3.3.0 の新機能。セレクターのネストから抜け出すために使用されます。

3 Mixin

Sass でミックスを宣言するには @mixin を使用します。パラメーター名は $ 記号で始まり、パラメーターのデフォルト値を設定することもできます。宣言された @mixin は、@

include

を介して マルチパラメータ mixin

を呼び出します。 @include によって渡されたパラメータの数が @mixin によって定義されたパラメータの数より少ない場合は、値を直接渡すことができます。後で不足がある場合は、デフォルト値が使用されます。不足のデフォルト値がない場合は、エラーが報告されます。さらに、同時に渡すパラメーター名と値を使用して、パラメーターを選択的に渡すこともできます。

複数値パラメータミックスイン

ボックスシャドウ、トランジションなど、パラメータに複数の値のセットを含めることができる場合、パラメータは、$variables のように、変数の後に 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 }
}

** @mixin @include呼び出し後に解析されたスタイルはコピーの形で存在しますが、以下の

inheritance

は共同宣言の形で存在するため、バージョン3.2.0以降ではパラメータを渡すことを推奨します次の継承% を使用してパラメーター クラスを渡す代わりに @mixin を使用します。 **4 継承

Sass では、セレクターの継承により、セレクターは別のセレクターのすべてのスタイルを継承し、それらを共同で宣言できます。セレクターの継承を使用するには、キーワード @extend の後に継承するセレクターを使用します。

配置セレクター%

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

占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。

//sass style
//-------------------------------
%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  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;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

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

5 函数

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

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

6 运算

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

7 条件判断及循环

@if判断

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

三目判断

if($condition, $if_true, $if_false)

for循环

for循环有两种形式，分别为：@for $var from

@each循环

语法为：@each $var in

多个字段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; 
}

以上がSASS についての学習のまとめの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。