ホームページ > 記事 > ウェブフロントエンド > Scss の基本構文と SASS ファイルのインポート方法の簡単な分析
この記事では、最も基本的な使い方と構文を中心に紹介します。Scss で導入された変数やネスティングにより、開発作業が大幅に容易になっていることがわかります。独自の補間式と組み合わせることで、CSS 風の記述は非常に柔軟です!
sass には、Sass (初期のインデント形式: Indented Sass) と SCSS ( Sassy CSS)
現在最も一般的に使用されているのは SCSS です。サフィックスが scss に変更された CSS ファイルは、Sassy CSS
構文を使用して直接書き込むことができます。
すべての有効な CSS は有効な SCSS でもあります。
変数の使用
Sass は、変数を識別するために $
記号を使用します。
変数の目的は、スタイル シート全体で一部の情報やデータを保存して再利用できるようにすることです。
色、フォント セット、または再利用したい CSS 値の保存など。
1. 変数宣言
は、CSS プロパティ宣言 (プロパティ宣言
) と非常によく似ています。
たとえば、変数 $highlight-color
を値 #F90
とフォント セット変数で宣言します。
$highlight-color: #F90; $font-stack: Helvetica, sans-serif; body { font: 100% $font-stack; color: $highlight-color; }
出力結果は:
body { font: 100% Helvetica, sans-serif; color: #F90; }
変数にはスコープがあります。変数が CSS ルール ブロックで定義されている場合、変数はこのルール ブロック内でのみ使用できます。
2. 変数リファレンス
変数は、CSS プロパティの標準値 (1px や太字など) が存在する場所であればどこでも使用できます。
CSS が生成されると、変数はその値に置き換えられます。
$color:#A34554; .box { width: 300px; height: 400px; &-left{ width: 30%; color: $color; } }
生成される CSS は次のとおりです:
.box { width: 300px; height: 400px; } .box-left{ width: 30%; color: #A34554; }
変数を宣言する場合、次のように変数の値は他の変数を参照することもできます $highlight-border
$ は変数 highlight-color
変数:
$highlight-color: #F90; $highlight-border: 1px solid $highlight-color; .selected { border: $highlight-border; } //编译后 .selected { border: 1px solid #F90; }
3 で使用されます。ダッシュ (ハイフン
) と下線 (アンダースコア
)#変数名の
$link-color をアンダースコア
$link_color で参照できます。
$link-color: blue; a { color: $link_color; } //编译后 a { color: blue; }
対照的に、水平線を使用することが一般的です。
ネスティング (ネスティング<span style="font-size: 18px;"></span>
)
#content article h1 { color: #333 } #content article p { margin-bottom: 1.4em } #content aside { background-color: #EEE }
Scss ネストされた
Sass では、ルール ブロックでのネストを利用します。 -rule ブロックにより、繰り返されるセレクターを 1 回だけ書き込むことができるため、重複が避けられ、読みやすくなります。 たとえば、上記の例では、scss ネストを利用しています:#content { article { h1 { color: #333 } p { margin-bottom: 1.4em } } aside { background-color: #EEE } }scss ネストを開く (解析する) ためのルールは次のとおりです:
外側の層から内側の層へ、ネストされたルール ブロックを開き、親セレクターが子の選択の前に配置されて新しいセレクターが形成され、内部のネストされたブロック処理がループで開かれます。
##親セレクターの識別子&通常、sass がネストを解析するとき、親セレクター (
#content##) #) は、スペースによってサブセレクター (article および
aside) の前に接続され、(
#contentarticle および
#contentざるを得ない#) を形成します##)、子孫セレクターを生成します。 ただし、疑似クラス
:hover
、複数のクラス名などについては、「子孫セレクター」によって接続しないでください。例:
article a { color: blue; :hover { color: red } }
generatedデフォルトでは、article a :hover
は、ホバーすると、article 要素内の a リンクのすべての子要素を赤にします。これは明らかに間違っています (a 自体に適用する必要があります)。
Sass は、このための特別なセレクター、親セレクター &
を提供します。これにより、ネストされたルールをより適切に制御できるようになります。
セレクターを配置できる限り、
&
article a { color: blue; &:hover { color: red } }が展開されると、
& は親セレクターによって直接置き換えられます。
article a { color: blue } article a:hover { color: red }
は、# を介してネストされたブロック内に実装できます。 # 親セレクターの前にセレクターを追加します (非常に柔軟です)。
#content aside { color: red; body.ie & { color: green } }
グループ セレクターのネスト
CSS では、, 分割を使用します。グループ セレクターは、次のように複数のセレクターに同時にスタイルを適用できます。
h1, h2 { margin: 0; }ただし、グループ セレクターを特定のコンテナー要素内の複数の要素に適用したい場合は、次のようにすることができます。繰り返しの作業。
.container h1, .container h2, .container h3 { margin-bottom: .8em }
ただし、sass のネストされた機能は、埋め込まれたグループ セレクターを結合解除するときに、埋め込まれた各セレクターを正しく結合します。<pre class="brush:js;toolbar:false;">.container{
h1,h2,h3{
margin-bottom:.8em;
}
}</pre><p>sass会组合成 <code>.container h1
、 .container h2
、.container h3
三者的群组选择器:.container h1, .container h2, .container h3{ xxx }
。
同样,群组选择器内的嵌套也会以这种方式解析:
nav, aside { a {color: blue} } // nav a, aside a {color: blue}
子组合选择器和同层组合选择器:>、+和~
这三种选择器必须和其他选择器配合使用。
/* 子组合选择器&gt; */ article &gt; section { border: 1px solid #ccc } /* 相邻组合选择器+ 选择 元素后紧跟的指定元素 */ header + p { font-size: 1.1em } /* 同层全体组合选择器~,选择所有跟在article后的同层article元素 */ article ~ article { border-top: 1px dashed #ccc }
在sass中使用时,可以通过嵌套直接生成正确的结果(位于外层选择器的后面,或内层选择器的前面均可!),而不需要使用&
。
article { /* 放在 里层选择器前边 */ ~ article { border-top: 1px dashed #ccc } &gt; section { background: #eee } /* 放在 外层选择器后边 */ dl &gt; { dt { color: #333 } dd { color: #555 } } nav + &amp;amp; { margin-top: 0 } }
解开后的css为:
article ~ article { border-top: 1px dashed #ccc } article &gt; footer { background: #eee } article dl &gt; dt { color: #333 } article dl &gt; dd { color: #555 } nav + article { margin-top: 0 }
最后一句,
nav + &amp;
使用父选择器&后,原本默认的嵌套规则不再适用,而是直接应用 & 组合的结果。
属性嵌套
sass中,属性也可以进行嵌套!
把属性名从中划线-的地方断开,在该属性后边添加一个冒号:,紧跟一个{ }块,把子属性部分写在这个{ }块中。这样就可以实现属性的嵌套。
nav { border: { style: solid; width: 1px; color: #ccc; } }
编译生成如下:
nav { border-style: solid; border-width: 1px; border-color: #ccc; }
结合属性的缩写形式,可以实现在嵌套属性中指明需要额外样式的特殊子属性。
nav { border: 1px solid #ccc { /* 单独设置的 子属性 */ left: 0px; right: 0px; } } /* 生成后 */ nav { border: 1px solid #ccc; border-left: 0px; border-right: 0px; }
插值(<span style="font-size: 18px;">Interpolation</span>
)
类似 es6 中的插值表达式,Sass也提供了插值计算的方式。
插值几乎可以用在任何地方,作为一个 SassScript 表达式的嵌入结果。
Sass的插值写法为:#{$variable_name}
。
利用插值动态生成选择器、属性名和值
可以使用插值获取变量或函数调用到一个选择器、或属性值。
比如:
$bWidth:5px; $style:&quot;blue&quot;; .nav { border: #{$bWidth} solid #ccc; &amp;.nav-#{$style} { color: #{$style}; } } // 编译为: .nav { border: 5px solid #ccc; } .nav.nav-blue { color: blue; }
属性名使用插值变量
使用插值的一个好处是,可以直接将变量值作为属性名使用。
如下,通过插值,属性名直接用变量来替代,这样就可以动态生成属性。
不使用插值,直接在属性的位置使用变量
$property
,将会被处理为对变量的赋值!
$value:grayscale(50%); $property:filter; .nav{ #{$property}: $value; } // 编译为: .nav { filter: grayscale(50%); }
在 @mixin 中使用插值
@mixin 混合器将在下一节介绍。
插值在写mixin时非常有用,比如下面通过传递的参数创建选择器(来自官网):
@mixin define-emoji($name, $glyph) { span.emoji-#{$name} { font-family: IconFont; font-variant: normal; font-weight: normal; content: $glyph; } } @include define-emoji(&quot;women-holding-hands&quot;, &quot; &quot;);
编译后的CSS为:
@charset &quot;UTF-8&quot;; span.emoji-women-holding-hands { font-family: IconFont; font-variant: normal; font-weight: normal; content: &quot; &quot;; }
css的特殊函数(<span style="font-size: 18px;">Special Functions</span>
【仅作了解】)
CSS中的许多函数都可以在Sass中正常使用,但也有一些特殊的函数有所不同。
所有的特殊函数,调用都返回不带引号的字符串。
url()
url()
函数在CSS中很常见,但是它的参数可以是带引号或不带引号的URL。
不带引号的URL在 Sass 中是无效的,所以需要特殊逻辑进行解析。
如下是url()的示例,如果url()的参数是有效的不带引号URL,Sass会原样解析它,并且不带引号时也可以使用插值表达式;如果不是有效的不带符号URL,将会解析其中的变量或函数,并转换为普通的CSS函数调用。
$roboto-font-path: &quot;../fonts/roboto&quot;; @font-face { // 引号中作为一个正常的函数调用解析 src: url(&quot;#{$roboto-font-path}/Roboto-Thin.woff2&quot;) format(&quot;woff2&quot;); font-family: &quot;Roboto&quot;; font-weight: 100; } @font-face { // 使用数学表达式,解析为普通的函数调用 src: url($roboto-font-path + &quot;/Roboto-Light.woff2&quot;) format(&quot;woff2&quot;); font-family: &quot;Roboto&quot;; font-weight: 300; } @font-face { // 作为一个插值表达式特殊处理 src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format(&quot;woff2&quot;); font-family: &quot;Roboto&quot;; font-weight: 400; }
calc(), clamp(), element()
算数表达式 calc() 和 Sass 的冲突;element() 的参数可以color。
使用它们时,Sass除了处理插值,其他都会保持原样解析!
min() 和 max()
Sass早于CSS支持使用 min() 和 max(),为了兼容所以需要特殊处理。
如果 min() 和 max() 函数调用的是普通CSS,则会被编译为CSS的 min() 和 max()。
普通CSS(Plain CSS
)包含嵌套调用 calc(), env(), var(), min(), max() 以及 插值。
但是,只要包含 SassScript 的特性,比如 Sass的变量、函数调用,min() 和 max() 就会被作为 Sass 的函数处理。
$padding: 12px; .post { // max()没有使用插值以外的Sass特性, 所以将会被编译为 CSS 的 max(). padding-left: max(#{$padding}, env(safe-area-inset-left)); padding-right: max(#{$padding}, env(safe-area-inset-right)); } .sidebar { // 应为没有通过插值使用sass变量,此处会调用Sass内置的 max() padding-left: max($padding, 20px); padding-right: max($padding, 20px); }
注释
sass另外提供了一种不同于css标准注释格式/* ... */
的注释语法,即静默注释,以//
开头,直到行末结束。
在生成的css中,静默注释将会被抹除,这样,可以按需抹除一些注释,而不需要全部显示给其他人。
body { color: #333; // 这种注释内容不会出现在生成的css文件中 padding: 0; /* 这种注释内容会出现在生成的css文件中 */ }
当标准注释
/* ... */
出现在原生css不允许的地方时,也会在编译后的css中被抹去。
多行注释 /* ... */
在 compressed 模式下会被移除,但是如果以 /*!
开头,则仍会包含在生成的 CSS 中。
使用@import
可以导入另外的sass文件(在生成css文件时会把相关文件导入进来)。在被导入文件中定义的变量和混合器maxin等均可在导入文件中使用。
css中的
@import
导入其他css文件很不常用,因为它是在执行到@import
规则时才会加载其他的css文件,这会导致页面加载变慢、样式的错乱和延迟等问题。
注:Sass官方目前已经开始打算用 @use 替代 @import 规则,因此鼓励使用 @use。但是,目前只有 Dart Sass 支持 @use,因此,现阶段主要还是使用 @import。
scss导入sidebar.scss
文件,可以使用如下规则:
@import &quot;sidebar&quot;; @import &quot;sidebar.scss&quot;;
sass局部文件(或分部文件,<span style="font-size: 18px;">partial file</span>
)
有的sass文件是专门用于被@import
命令导入的,而不需要单独生成css文件,这样的文件称为局部文件。
sass的约定是:sass局部文件的文件名以下划线 _ 开头,sass在编译时就不会将这个文件编译输出为css。
在 @import
局部文件时,可以省略文件开头的下划线和.scss
后缀,不需要写文件的全名。
局部文件可以被多个不同的文件引入。对于需要在多个页面甚至多个项目中使用的样式,非常有用。
默认变量值
通常情况下,在反复多次声明一个变量时,只有最后一个声明有效(即使用最后一个声明赋予的值)。
sass通过!default
标签可以实现定义一个默认值(类似css的!important
标签对立),!default
表示如果变量被声明赋值了则用新声明的值,否则用默认值。
比如一个局部文件中:
$fancybox-width: 400px !default; .fancybox { width: $fancybox-width; }
如果用户在导入该sass局部文件之前,声明了一个 $fancybox-width
变量,那么局部文件中对 $fancybox-width
赋值400px的操作就无效。如果用户没有做这样的声明,则 $fancybox-width
将默认为400px。
也就是,在后面使用 !default
声明的变量,并不会覆盖其前面声明赋值的相同变量值。
嵌套导入
sass可以在嵌套规则块的内部使用@import
导入局部文件【局部文件会被直接插入到css规则内导入它的地方】。
如局部文件_blue-theme.sass
内容为:
aside { background: blue; color: white; }
将它导入到一个CSS规则内:
.blue-theme {@import &quot;blue-theme&quot;}
生成的结果跟你直接在 .blue-theme
选择器内写 _blue-theme.scss
文件中的内容完全一样。
.blue-theme { aside { background: blue; color: #fff; } }
原生的CSS导入的支持
sass中支持原生css的导入,会生成原生的scc @import(在浏览器解析css时再下载并解析)。
sass中@import
生成原生css导入的条件是:
如果想将原始的css文件,当做sass导入,可以直接修改.css
后缀为.scss
(sass语法完全兼容css)。
更多编程相关知识,请访问:编程入门!!
以上がScss の基本構文と SASS ファイルのインポート方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。