記事のディレクトリ
文法
- 前回の記事では、sassファイルをコンパイルする方法について説明し、次にsassの構文について説明しました。
- なぜこれほど強力で使いやすいのですか？それはすべて強力な文法に依存します
.sassそして、.scssファイルの構文は同じですが、違いがある{}と;
注釈
- コンパイル時にコンパイルされないコメント
// 我是一个普通注释，在编译的时候，我就被过滤了
- コンパイル時にコンパイルされるメモ
/* 我在编译的时候，会被一起编译过去 */
- 強力な注釈
/*! 我是一个强力注释，不光编译的时候会被编译过去，将来压缩文件的时候也会存在 */
変数
- sassで
$変数を定義するには：
$color:red;
$font_size:12px;
.header{
background-color: $color;
font-size:$font_size*2;
}
- 一般的に色またはいくつかの一般的に使用されるピクセル値を定義するために使用されます
ネスト
sass私たちが使用する最長のものはネストです
h1 {
width: 100px;
div {
width: 200px;
}
}
// 编译结果
h1 {
width: 100px;
}
h1 div {
width: 200px;
}
- これはネストされています。理論的には、無限にネストできます。
ul {
width: 100px;
li {
width: 90px;
div {
width: 80px;
p {
width: 70px;
span: {
color: red;
}
}
}
}
}
＆ネスティング中
- 巣の中には
&私たちが使用できる識別子があります
div {
width: 100px;
height: 100px;
:hover {
width: 200px;
}
}
// 我想的是 div 被鼠标悬停的时候 width 变成 200
// 但是编译结果却是
div {
width: 100px;
height: 100px;
}
div :hover {
// 注意这中间是有个空格的，并没有连在一起
width: 200px;
}
- この時間は
&、に接続するために使用する必要があります
div {
width: 100px;
height: 100px;
&:hover {
width: 200px;
}
}
// 编译结果
div {
width: 100px;
height: 100px;
}
div:hover {
// 现在才是连在一起的
width: 200px;
}
グループネスティング
- グループのネストとは、複数のタグを同時にネストすることです。
div {
width: 100px;
.box1, .box2, .box3 {
color: red;
}
}
// 编译结果
div {
width: 100px;
}
div .box1, div .box2, div .box3 {
color: red;
}
- もう1つは、複数のタグが同時にタグをネストすることです。
h1, h2, h3 {
width: 100px;
.box {
color: red;
}
}
// 编译结果
h1, h2, h3 {
width: 100px;
}
h1 .box, h2 .box, h3 .box {
color: red;
}
ネストされた属性
scss呼ばれるネストされた特別な存在であるネストされたプロパティは、- セレクターのネストとは異なり、属性を書き込むときに使用されます
div {
border: {
style: solid;
width: 10px;
color: pink;
}
}
// 编译结果
div {
border-style: solid;
border-width: 10px;
border-color: pink;
}
- この属性のネストには、いくつかの特別な用途もあります
div {
border: 1px solid #333 {
bottom: none;
}
}
// 编译结果
div {
border: 1px solid #333;
border-bottom: none;
}
ミキサー
- 実際、それは「関数」を定義し、それをscssファイルで使用することです。
- 文法：
@mixin 函数名{函数代码}
// 定义一个混合器使用 @mixin 关键字
@mixin radius {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
- コンパイルされません。使用する場合にのみコンパイルされます。
- 呼び出し構文：
@include 函数名;
// 使用混合器使用 @include 关键字
div {
width: 100px;
height: 100px;
@include radius;
}
- コンパイル結果
div {
width: 100px;
height: 100px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-o-border-radius: 10px;
border-radius: 10px;
}
ミキサーパラメーター
- ミキサーは「関数」のようなものなので、「関数」のようなパラメーターを渡すことができなければなりません
- 「関数」と同じように、タイミング時は「仮パラメータ」、呼び出し時は「実パラメータ」です。
- 文法：
@mixin 函数名(形参){函数代码中可以使用形参}
// 定义混合器
@mixin my_transition($pro, $dur, $delay, $tim) {
-webkit-transition: $pro $dur $delay $tim;
-moz-transition: $pro $dur $delay $tim;
-ms-transition: $pro $dur $delay $tim;
-o-transition: $pro $dur $delay $tim;
transition: $pro $dur $delay $tim;
}
- このミキサーを使用するときに「実際のパラメーター」を渡す
- 呼び出し構文：
@include 函数名(实参);
div {
width: 100px;
height: 100px;
@include my_transition(all, 1s, 0s, linear);
}
- コンパイル結果
div {
width: 100px;
height: 100px;
-webkit-transition: all 1s 0s linear;
-moz-transition: all 1s 0s linear;
-ms-transition: all 1s 0s linear;
-o-transition: all 1s 0s linear;
transition: all 1s 0s linear;
}
- いくつの「仮パラメータ」が書き込まれ、次に呼び出すときにいくつの「実際のパラメータ」が渡されなければならないか
パラメータのデフォルト値
- ミキサーを定義するときに、一部のパラメーターにいくつかのデフォルト値を書き込むこともできるため、「実際のパラメーター」を渡す必要はありません。
- 文法：
@moxin 函数名(形参:值){函数代码中可以使用形参}
// 设置一些带有默认值的参数
@mixin my_transition($dur: 1s, $pro: all, $delay: 0s, $tim: linear) {
-webkit-transition: $dur $pro $delay $tim;
-moz-transition: $dur $pro $delay $tim;
-ms-transition: $dur $pro $delay $tim;
-o-transition: $dur $pro $delay $tim;
transition: $dur $pro $delay $tim;
}
- を使用する場合、合格しなかった場合はデフォルト値が使用されます
div {
width: 100px;
height: 100px;
// 使用的时候，只传递一个，剩下的使用默认值
@include my_transition(2s);
}
- コンパイル結果
div {
width: 100px;
height: 100px;
-webkit-transition: 2s all 0s linear;
-moz-transition: 2s all 0s linear;
-ms-transition: 2s all 0s linear;
-o-transition: 2s all 0s linear;
transition: 2s all 0s linear;
}
継承
- 次のセレクターが上記のセレクターのスタイルを使用する必要がある場合は、継承を使用して、それを削除し、再度書き込む代わりに使用できます。
- 継承構文：
@extend 被继承的选择器;
.box1{
width: 100px;
height: 100px;
}
.box2{
@extend .box1;
border:1px solid #000;
}
- コンパイル結果：
.box1, .box2 {
width: 100px;
height: 100px;
}
.box2 {
border: 1px solid #000;
}
インポート
ファイル内の変数とミキサーを定義します。cssを作成する場合、ファイルは乱雑であるため、通常、変数とミキサーを別々のファイルに配置し、コマンドを介してインポートして、各ファイルのコードが同じタイプになるようにします。
- インポートされた構文：
@import "路径"; - 変数ファイル：variable.scss
$orange:orange;
$red:red;
- ミキサーファイル：mixin.scss
@mixin bor($style,$width,$color){
border:$style $width $color;
}
@mixin bac($path,$color,$repeat){
background:url($path) $color $repeat;
}
- スタイルファイル：
@import "./variable.scss";
@import "./mixin.scss";
.box{
@include bor(solid,1px,$red);
}
- コンパイルされたcss：
.box {
border: solid 1px red;
}