CSSプリプロセッサSassサンプルの詳細説明-CSSチュートリアル-php.cn

この記事はCSSプリプロセッサSassの詳細な解説に関する関連情報を中心に紹介していますが、編集者が非常に良い内容だと思ったので、参考として共有させていただきます。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

Sass は CSS を強化する補助ツールで、CSS 構文に基づいて変数、ネストされたルール、ミックスイン、インラインインポートなどの高度な機能を追加します。 Sass および Sass スタイルライブラリ (Compass など) を使用すると、スタイルファイルをより適切に整理および管理し、プロジェクトをより効率的に開発できます。

1. 機能

CSS3と完全互換
CSSに基づいて変数、ネスト、ミックスイン、その他の機能を追加
関数を使用してカラー値と属性値を制御
は制御ディレクティブなどの高度な機能を提供します
カスタマイズされた出力形式

ファイル接尾辞名: sass には 2 つの接尾辞ファイル名があり、1 つは接尾辞であり、もう 1 つは中括弧とセミコロンを使用しません。ここで使用する scss ファイルは、中括弧とセミコロンを使用して通常作成する CSS ファイル形式に似ています。このチュートリアルで言及されているすべての sass ファイルは、接尾辞 scss が付いているファイルを指します。また、sass 接尾辞の厳密な形式要件によるエラーを避けるために、接尾辞 scss の付いたファイルを使用することをお勧めします。

//文件后缀名为sass的语法
body
  background: #eee
  font-size:12px
p
  background: #0982c1

//文件后缀名为scss的语法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
}

ログイン後にコピー

2. SassとLessの構文比較

2.1 SassとLessの違い

コンパイル環境が異なります - SassはRubyなどのサーバーサイド環境に基づいてコンパイルされます。 Less はサーバーをサポートできますサイドコンパイルはクライアント側 (ブラウザ環境) でもコンパイルできます
変数記号は異なります - Sass は $ 記号を使用して変数を宣言し、Less は @ 記号を使用して変数を宣言します
条件ステートメントのサポートは異なります - Sass は複雑な条件ステートメント (if..else.. に似たもの) をサポートしますが、Less は単純な条件ステートメント (if().. に似たもの) のみをサポートします
スコープ - Sass のローカルで変更された変数グローバル変数に影響を与える可能性がありますが、ローカルスコープでのみ有効になります。
外部 CSS ファイルを参照する方法は異なります。Sass はデフォルトで .sass または .scss ファイルをインポートするときにサフィックスを無視できますが、Less はキーワード設定を通じてインポートされたファイルの処理方法を制御する必要があります。

2.2 Sass と Less の類似点

Mixins - 関数やマクロに似ており、パラメーターを渡すことができます
ネストルール - クラス内でクラスがネストされるため、重複したコードが削減されます。
3. Sass 構文の主な機能の紹介

Sass では、次のセットが可能です。ネストされる CSS スタイル別のスタイルのセットにネストされ、内部スタイルはその外側のセレクターを親セレクターとして使用します。ネスト機能により、親セレクターへの繰り返しの入力が回避され、次のような複雑な CSS 構造が管理しやすくなります。

親セレクター&

CSS ルールをネストする場合、要素のホバースタイルを設定する場合や、本文要素に特定のクラス名がある場合など、ネストされた外側レイヤーの親セレクターを直接使用する必要がある場合があります。を使用すると、& を使用して、ネストされたルールの外側の親セレクターを表すことができます。

//sass style or less style
#main p {
  color: #00ff00;
  width: 97%;

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

//css style
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
  background-color: #ff0000;
  color: #000000; }

ログイン後にコピー

属性の入れ子

一部の CSS プロパティは、font-family、font-size、font-weight など、すべて同じ名前空間 (ネームスペース) に従い、プロパティの名前空間として font を使用します。このような属性の管理を容易にし、繰り返しの入力を避けるために、Sass では属性を次のように名前空間にネストすることができます。

//sass style or less style
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

//css style
a {
font-weight: bold;
text-decoration: none; }
a:hover {
  text-decoration: underline; }
body.firefox a {
  font-weight: normal; }

ログイン後にコピー

名前空間には、次のような独自の属性値を含めることもできます。

3.2 インポート

sass のインポート (@import) ルールは CSS のルールとは異なり、コンパイル時に @import の scss ファイルがマージされ、1 つの CSS ファイルのみが生成されます。ただし、@import 'reset.css' などの CSS ファイルを Sass ファイルにインポートした場合、その効果は通常の CSS インポートされたスタイルファイルと同じになります。インポートされた CSS ファイルはコンパイルされたファイルにマージされませんが、存在します。 @import モードで。

すべての sass インポートファイルは接尾辞 .scss を無視できます。一般的に、_mixin.scss のように、基本的なファイル名の付け方は _ で始まります。この種のファイルはインポート時に下線を引く必要はありませんが、 @import "mixin" と記述することができます。

less import (@import) 構文: @import (keyword) "filename";

複数のキーワード @import を使用できます。キーワードを区切るにはカンマを使用する必要があります: 例: @import (optional, Reference) " foo.less" ;

リファレンス:less ファイルを使用しますが、出力しません

inline:出力をソースファイルに含めますが、処理しません

less: 将该文件视为less文件，无论其扩展名为什么

css: 将文件视为css文件，无论扩展名为什么

once: 该文件仅可导入一次 (默认)

multiple: 该文件可以多次导入

optional: 当没有发现文件时仍然编译

导入文件代码示例：

/*被导入sass文件a.scss，less文件a.less：*/

//a.scss or a.less
//-------------------------------
body {
  background: #eee;
}

/*需要导入样式的sass文件b.scss，less文件b.less：*/

@import "reset.css";
@import "a";
p{
  background: #0982c1;
}   

/*转译出来的b.css样式：*/

@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

ログイン後にコピー

根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了。同理，less中也是这样处理的。

3.3 注释 /* */ 与 //

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会。Less中不用担心这一点，Less中多行注释 /* */，以及单行注释 //都可以随意使用，都会在编译过程中被保留。例如：

//sass style
/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won&#39;t appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

//css style
/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }
a {
  color: green; }

ログイン後にコピー

3.4 SassScript

变量 $

Sass的变量必须是$开头，后面紧跟变量名，如果值后面加上!default则表示默认值。Less的变量与Sass类似，只是使用符号不同，Less中采用的是@

//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}  
//less style
//-------------------------------
@fontSize: 12px;
body{
    font-size:@fontSize;
}
//css style
//-------------------------------
body{
    font-size:12px;
}

ログイン後にコピー

变量默认值

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在使用默认变量之前重新声明下变量即可；默认变量的价值在进行组件化开发的时候会非常有用。

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

//css style
//-------------------------------
body{
    line-height:1.5;
}

/*覆盖默认值*/
//sass style
//-------------------------------
$baseLineHeight:  2;
$baseLineHeight:  1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:2;
}

ログイン後にコピー

变量 #{} 的使用形式

一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

//sass style
//-------------------------------
$borderDirection:    top !default; 
$baseFontSize:       12px !default;
$baseLineHeight:     1.5 !default;

//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

ログイン後にコピー

多值变量 list

简单来说list类型有点像js中的数组。list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。

关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等

定义：

//一维数据
$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

ログイン後にコピー

使用方法：

//sass style
//-------------------------------
$linkColor:  #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);

  &:hover{
    color:nth($linkColor,2);
  }
}

//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}

ログイン後にコピー

多值变量 map

简单来说map类型有点像es6语法中的map数据结构。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)等

定义：

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

ログイン後にコピー

使用方法：

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

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

ログイン後にコピー

变量作用域

Sass和Less中的变量作用域分别类似与javascript中的两种变量申明方式，下面一段代码可以对比出变量声明时的不同处理方式。

Sass中的变量赋值直接修改全局变量，Less中的变量赋值可只在局部生效。

//Sass style
$color:red; 
p{ 
  $color:blue; 
  color:$color;//blue 
} 
a{ 
  color:$color;//blue 
}
//Less style
@color:red; 
p{ 
  @color:blue; 
  color:@color;//blue 
} 
a{ 
  color:@color;//red 
}

ログイン後にコピー

3.5 混合(mixin)

sass中使用@mixin声明混合，可以传递参数，也可以给参数设置默认值。声明的@mixin通过@include来调用；在less中只需要将定义好的class用类似函数的方式直接引用。

无参数 mixin

//sass style
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}
//less style
.center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    .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);
}
.opacity-80{
  @include opacity(80); //传递参数
}
//less style
.opacity(@opacity:50) {
  opacity: @opacity / 100;
  filter: alpha(opacity=@opacity);
}
.opacity-80{
  .opacity(80); //传递参数
}
//css style
.opacity-80{
  opacity: .8;
  filter: alpha(opacity=80);
}

ログイン後にコピー

多个参数 mixin

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

//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);
}
//less style
.horizontal-line(@border:1px dashed #ccc, @padding:10px){
    border-bottom:@border;
    padding-top:@padding;
    padding-bottom:@padding;  
}
.imgtext-h li{
    .horizontal-line(1px solid #ccc);
}
//css style
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}

ログイン後にコピー

多组值参数 mixin

Sass中如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables…；Less表示不定参数时可以直接使用 … 表示，并用@arguments表示所有参数

//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));
}
//less style
.box-shadow(...) {
  -webkit-box-shadow:@arguments;
  box-shadow:@arguments;
}
.box{
  border:1px solid #ccc;
  .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);
}

ログイン後にコピー

3.6 运算

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

//计算数值、变量
$baseFontSize:          14px !default;
$baseLineHeight:        2 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default; // => 28px
$halfBaseGap:           $baseGap / 4  !default; // => 7px
$samllFontSize:         $baseFontSize - 2px  !default; // => 12px

$_columns:              12 !default;  
$_column-width:         60px !default;  
$_gutter:               20px !default;     
$_gridsystem-width:     $_columns * ($_column-width + $_gutter); // => 960px

//计算颜色
p {
  color: #010203 + #040506; // => #050709
}

//计算字符串
p:before {
  content: "Foo " + Bar; // => "Foo Bar"
  font-family: sans- + "serif"; // => sans-serif
}

ログイン後にコピー

3.7 控制指令

SassScript 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用。

@if

//sass style
p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
//css style
p {
border: 1px solid; }

//sass style
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//less style
@type: monster;
p (@type) when (@type = ocean){color: blue;}
p (@type) when (@type = matador){color: red;}
p (@type) when (@type = monster){color: green;}
p (@type) when (@type = dark){color: black;}

//css style
p {
color: green; }

ログイン後にコピー

@for

@for 指令包含两种格式：@for $var from through ，或者 @for $var from to ，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含与的值，而使用 to 时条件范围只包含的值不包含的值。另外，$var 可以是任何变量，比如 $i；和必须是整数值。

//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类型数据。

单个字段list数据循环：

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

//css style
.puma-icon {
  background-image: url(&#39;/images/puma.png&#39;); 
}
.sea-slug-icon {
  background-image: url(&#39;/images/sea-slug.png&#39;); 
}
.egret-icon {
  background-image: url(&#39;/images/egret.png&#39;); 
}
.salamander-icon {
  background-image: url(&#39;/images/salamander.png&#39;); 
}

ログイン後にコピー

多个字段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(&#39;/images/#{$animal}.png&#39;);
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url(&#39;/images/puma.png&#39;);
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url(&#39;/images/sea-slug.png&#39;);
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url(&#39;/images/egret.png&#39;);
  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 style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

ログイン後にコピー

@extend

@extend 的作用是将重复使用的样式 (.error) 延伸 (extend) 给需要包含这个样式的特殊样式（.seriousError），例子：

//sass style
//-------------------------------
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

//css style
//-------------------------------
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }

.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }

.seriousError {
  border-width: 3px; }

ログイン後にコピー

3.8 函数指令

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：

//sass style
//-------------------------------
$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
//css style
//-------------------------------
#sidebar {
  width: 240px; }

ログイン後にコピー

与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果。

Sass 函数允许使用关键词参数，上面的例子也可以写成：

//关键词参数调用形式
#sidebar { width: grid-width($n: 5); }

ログイン後にコピー

虽然不够简明，但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。