sass高级语法-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

sass高级语法

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Aug 30, 2016 am 09:21 AM

github地址:https://github.com/lily1010/sass/tree/master/course03

用到的sass语法是:

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

如下图:

1 导入外部文件,缺省文件后缀默认是sass/scss文件,一般在头部声明

test.scss内容是:

<span style="color: #000000;">@import "lili.scss";  //导入一个文件
@import "lili.scss", "haha.scss"; //导入两个文件 
/*但在以下情况下， 仅作为普通的 CSS @import 规则语句，不会导入任何 Sass 文件。
*(1) 如果文件的扩展名是 .css。
*(2) 如果文件名以 http:// 开始。
*(3) 如果文件名是 url()
*(4)如果@import 中包含任何的媒体查询（media queries)
*/
@import "lili.css";
@import "http://foo.com/bar";
@import url(lili);
@import "lili" screen;

/*在import里面插入动态变量,但是仅适用于url方式*/
$name:family;
@import url("http://fonts.googleapis.com/css?family=#{$name}");

/*导入scss文件,却不需要将它编译为css文件做法:
 *(1)新建一个文件夹,为了将不需要编译的文件和需要编译的文件分开,这点千万注意
 *(2)在已经建好的文件夹里面,将不要编译的*.scss文件命名为_*.scss
 *(3)导入的时候不要用下划线,直接@import("新建文件夹名字/*.scss")
 */</span>

其中lili.scss内容是:

<span style="color: #000000;">.test1 {
    color: black;
}</span>

其中haha.scss内容是:

<span style="color: #000000;">.test11 {
    color: deeppink;
}</span>

编译成test.css内容是:

<span style="color: #000000;">@import url(lili.css);
@import "http://foo.com/bar";
@import url(lili);
@import "lili" screen;
@import url("http://fonts.googleapis.com/css?family=family");
.test1 {
  color: black;
}

.test1 {
  color: black;
}

.test11 {
  color: deeppink;
}</span>

2 extend函数,不只继承类名选择器的样式,还继承与它相关的样式,包括继承它的父选择器

test.scss内容是:

<span style="color: #000000;">.test2 {
  border: 1px #f00;
  background-color: #fdd;
}
.test2.test21 {
  background-image: url("/image/hacked.png");
}
.test2 .test22 {
  background-image: url("/image/haha.png");
}
html .test2 {
  width: 100px;
}
.lili {
  @extend .test2;
  border-width: 3px;
} </span>

编译成test.css内容是:

.test2, .lili {
  border: 1px #f00;
  background-color: #fdd;
}

.test2.test21, .test21.lili {
  background-image: url("/image/hacked.png");
}

.test2 .test22, .lili .test22 {
  background-image: url("/image/haha.png");
}

html .test2, html .lili {
  width: 100px;
}

.lili {
  border-width: 3px;
}

3 extend函数,继承单元素选择器样式,同时继承与它相关的样式,包括继承它的父选择器

test.scss内容是:

<span style="color: #000000;">a:hover {
    color: green;
}
a.class1:hover {
    height: 10px;
}
html a:hover {
    width: 10px;
}
.test3 {
    @extend a:hover;
    width: 20px;
}</span>

编译成test.css内容是:

<span style="color: #000000;">a:hover, .test3 {
  color: green;
}

a.class1:hover, .class1.test3 {
  height: 10px;
}

html a:hover, html .test3 {
  width: 10px;
}

.test3 {
  width: 20px;
}</span>

4 extend中链式扩展

test.scss内容是:

<span style="color: #000000;">.test4 {
    width:20px;
}
.test41 {
    @extend .test4;
    height: 20px;
}
.test42 {
    @extend .test41;
    top:20px;
}</span>

编译成test.css内容是:

<span style="color: #000000;">.test4, .test41, .test42 {
  width: 20px;
}

.test41, .test42 {
  height: 20px;
}

.test42 {
  top: 20px;
}</span>

5 占位符%,%不会被编译到css里面

test.scss内容是:

<span style="color: #000000;">.test5 a%name {
    width: 100px;
}
.lili {
    height: 200%;
    @extend %name;
}</span>

编译成test.css内容是:

<span style="color: #000000;">.test5 a.lili {
  width: 100px;
}

.lili {
  height: 200%;
}</span>

6 extend中防止继承不存在的样式出错,用!optional直接跳过空样式

test.scss内容是:

<span style="color: #000000;">.test6 {
    @extend noexist!optional;
    height: 100px;
}</span>

编译成test.css内容是:

<span style="color: #000000;">.test6 {
  height: 100px;
}</span>

7 @at-root指令导致一个或多个规则被限定输出在文档的根层级上，而不是被嵌套在其父选择器下

test.scss内容是:

<span style="color: #000000;">.test7 {
    height: 20px;
    @at-root {
        .children1 {
            color: red;
        }
        .children2 {
            color: black;
        }
    }
}</span>

编译成test.css内容是:

<span style="color: #000000;">.test7 {
  height: 20px;
}
.children1 {
  color: red;
}

.children2 {
  color: black;
}</span>

8 @at-root(without:类名)将选择器移动到嵌套指令之外

test.scss内容是:

<span style="color: #000000;">.gaga {
    @media name {
      .page {
        width: 8px;
        @at-root (without: media) {  //注意此处目前测试是不支持类名的,比如.test8
          color: red;
        }
      }
    }
}</span>

编译成test.css内容是:

<span style="color: #000000;">@media name {
  .gaga .page {
    width: 8px;
  }
}
.gaga .page {
  color: red;
}</span>

9 if条件判断,注意不支持if...else...

test.scss内容是:

.test8 {   //<span style="color: #0000ff;">if</span>...<span style="color: #0000ff;">if</span><span style="color: #000000;">..
    @</span><span style="color: #0000ff;">if</span> 1+1 == 2<span style="color: #000000;"> {
        width: 20px;
    }
    @</span><span style="color: #0000ff;">if</span> 5  {
        width: 100px;
    }
}
.test81 {  //<span style="color: #0000ff;">if</span>...<span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span><span style="color: #000000;">...
    @</span><span style="color: #0000ff;">if</span> 1+1 != 2<span style="color: #000000;"> {
        width: 20px;
    }
    @</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> 5 > 3<span style="color: #000000;"> {
        width: 100px;
    }
}
.test82 {  </span>//<span style="color: #0000ff;">if</span>...<span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span>...<span style="color: #0000ff;">else</span><span style="color: #000000;">...
    @</span><span style="color: #0000ff;">if</span> 1+1 != 2<span style="color: #000000;"> {
        width: 20px;
    }
    @</span><span style="color: #0000ff;">else</span> <span style="color: #0000ff;">if</span> 5  { 
        width: 100px;
    }
    @<span style="color: #0000ff;">else</span><span style="color: #000000;"> {
        width: 10px;
    }
}</span>

编译成test.css内容是:

<span style="color: #000000;">.test8 {
  width: 20px;
}

.test81 {
  width: 100px;
}

.test82 {
  width: 10px;
}</span>

10 for循环语句

test.scss内容是:

//第一种格式 @<span style="color: #0000ff;">for</span> $var <span style="color: #0000ff;">from</span> <start> through <end>,注意范围包括<start>和<end><span style="color: #000000;">的值
@</span><span style="color: #0000ff;">for</span> $i <span style="color: #0000ff;">from</span> 1 through 3<span style="color: #000000;"> {
    .gray</span><span style="color: #008000;">#</span><span style="color: #008000;">{$i*3} {</span>
        color: <span style="color: #008000;">#</span><span style="color: #008000;">333*$i; </span>
<span style="color: #000000;">    }
}

</span>//第二种格式 @<span style="color: #0000ff;">for</span> $var <span style="color: #0000ff;">from</span> <start> to <end>,注意范围从<start>开始运行，但不包括<end><span style="color: #000000;">的值
@</span><span style="color: #0000ff;">for</span> $i <span style="color: #0000ff;">from</span> 1 to 4<span style="color: #000000;"> {
    .gray2</span><span style="color: #008000;">#</span><span style="color: #008000;">{$i*3} {</span>
        color: <span style="color: #008000;">#</span><span style="color: #008000;">333*$i; </span>
<span style="color: #000000;">    }
}</span></end></start></end></start></end></start></end></start>

编译成test.css内容是:

<span style="color: #000000;">.gray3 {
  color: </span><span style="color: #008000;">#</span><span style="color: #008000;">333333;</span>
<span style="color: #000000;">}

.gray6 {
  color: </span><span style="color: #008000;">#</span><span style="color: #008000;">666666;</span>
<span style="color: #000000;">}

.gray9 {
  color: </span><span style="color: #008000;">#</span><span style="color: #008000;">999999;</span>
<span style="color: #000000;">}

.gray23 {
  color: </span><span style="color: #008000;">#</span><span style="color: #008000;">333333;</span>
<span style="color: #000000;">}

.gray26 {
  color: </span><span style="color: #008000;">#</span><span style="color: #008000;">666666;</span>
<span style="color: #000000;">}

.gray29 {
  color: </span><span style="color: #008000;">#</span><span style="color: #008000;">999999;</span>
}

11 each循环语句 @each $var in

test.scss内容是:

$name:<span style="color: #800000;">"</span><span style="color: #800000;">lili</span><span style="color: #800000;">"</span>,<span style="color: #800000;">"</span><span style="color: #800000;">yaya</span><span style="color: #800000;">"</span>,<span style="color: #800000;">"</span><span style="color: #800000;">sansa</span><span style="color: #800000;">"</span>;  //<span style="color: #000000;">注意数组list的写法
@each $i </span><span style="color: #0000ff;">in</span><span style="color: #000000;"> $name {
    test9.</span><span style="color: #008000;">#</span><span style="color: #008000;">{$i} {</span>
<span style="color: #000000;">        width: 10px;
    }
}

$name2:(name21:</span><span style="color: #800000;">"</span><span style="color: #800000;">lili</span><span style="color: #800000;">"</span>,name22:<span style="color: #800000;">"</span><span style="color: #800000;">yaya</span><span style="color: #800000;">"</span>,name23:<span style="color: #800000;">"</span><span style="color: #800000;">sansa</span><span style="color: #800000;">"</span>);  //<span style="color: #000000;">注意对象map的写法
@each $i </span><span style="color: #0000ff;">in</span><span style="color: #000000;"> $name2 {
    test9.</span><span style="color: #008000;">#</span><span style="color: #008000;">{$i} {</span>
<span style="color: #000000;">        width: 10px;
    }
}

$name3:(name31:</span>1,name32:2,name33:3);  //<span style="color: #000000;">注意对象map的写法
@each $key,$value </span><span style="color: #0000ff;">in</span><span style="color: #000000;"> $name3 {
    test9.</span><span style="color: #008000;">#</span><span style="color: #008000;">{$key} {</span>
        width: 10px*<span style="color: #000000;">$value;
    }
}</span>

编译成test.css内容是:

test9.lili {
  width: 10px;
}

test9.yaya {
  width: 10px;
}

test9.sansa {
  width: 10px;
}

test9.name21 lili {
  width: 10px;
}

test9.name22 yaya {
  width: 10px;
}

test9.name23 sansa {
  width: 10px;
}

test9.name31 {
  width: 10px;
}

test9.name32 {
  width: 20px;
}

test9.name33 {
  width: 30px;
}

12 while循环语句

test.scss内容是:

$i:3;
@while $i > 0 {
    .gray#{$i} {
        color: #333*$i;
    }
    $i:$i - 1; //注意此处不能写成$i:$i-1,因为会被当成字符串
}

编译成test.css内容是:

.gray3 {
  color: #999999;
}

.gray2 {
  color: #666666;
}

.gray1 {
  color: #333333;
}

13 混入指令,实现代码块复用

test.scss内容是:

@mixin left01 {  //不带参数
    float: left;
}
.test10 {
    @include left01; 
}

@mixin left02($left) {  //带1个参数
    float: $left;
}
.test101 {
    @include left02(left); 
}

@mixin left03($left,$width) {  //带2个参数,或者说参数为数组
    float: $left;
    .lili {
        width: $width;
    }
}
.test102 {
    @include left03(left,100px); 
}

@mixin left04($name31,$name32,$name33) {  //参数为对象,但是接受传递的参数必须是对象相对应key,同时需要用...传递参数
    .lili {
        width: $name31;
        height: $name32;
        top: $name33;
    }
}
$map:(name31:"1px",name32:"2px",name33:"3px");
.test103 {
    @include left04($map...); 
}

@mixin left05($left:right) {  //带默认参数,不传参的话就用默认参数
    float: $left;
}
.test104 {
    @include left05; 
}

@mixin box-shadow($shadows...) {  //不定参数,用...
      -moz-box-shadow: $shadows;
      -webkit-box-shadow: $shadows;
      box-shadow: $shadows;
}
.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

编译成test.css内容是:

.test10 {
  float: left;
}

.test101 {
  float: left;
}

.test102 {
  float: left;
}
.test102 .lili {
  width: 100px;
}

.test103 .lili {
  width: "1px";
  height: "2px";
  top: "3px";
}

.test104 {
  float: right;
}

.shadows {
  -moz-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  -webkit-box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
  box-shadow: 0px 4px 5px #666, 2px 6px 10px #999;
}

14 传递内容块@content到混入,传递到@content位置

test.scss内容是:

<span style="color: #000000;">@mixin lala {
    html {
        color: </span><span style="color: #008000;">#</span><span style="color: #008000;">888;</span>
<span style="color: #000000;">        @content;
    }
}
@include lala {  </span>//<span style="color: #000000;">此处名字必须和上面保持一致
    .logo {
        font</span>-<span style="color: #000000;">size: 15px;
    }
}</span>

编译成test.css内容是:

<span style="color: #000000;">html {
  color: </span><span style="color: #008000;">#</span><span style="color: #008000;">888;</span>
<span style="color: #000000;">}
html .logo {
  font</span>-<span style="color: #000000;">size: 15px;
}</span>

15 变量在混入@mixin的作用域,即传递给混入（mixin）的内容块在其被定义的作用域中进行运算，而不是混入（mixin）的作用域。这意味着混入（mixin）的局部变量不能传递给样式块使用

test.scss内容是:

$color: white;
@mixin haha($color:black) {
    background-color: $color;
    @content;
}
.test12 {
    @include haha{
        color: $color;
    }
}

编译成test.css内容是:

<span style="color: #000000;">.test12 {
  background</span>-<span style="color: #000000;">color: black;
  color: white;
}</span>

16 函数,用法类似@mixin

test.scss内容是:

<span style="color: #000000;">@function sasa($name) {
    @</span><span style="color: #0000ff;">return</span><span style="color: #000000;"> $name;
}
.test13 {
    font</span>-<span style="color: #000000;">size: sasa(15px);
}</span>

编译成test.css内容是:

<span style="color: #000000;">.test13 {
  font</span>-<span style="color: #000000;">size: 15px;
}</span>

Kenyataan

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel Berkaitan

Dari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AM

HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

Memahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

HTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AM

Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

HTML, CSS, dan JavaScript: Alat penting untuk pemaju webApr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab TerasApr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Adakah HTML mudah belajar untuk pemula?Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Apakah contoh tag permulaan dalam html?Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

See all articles

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

2 minggu yang laluByDDD

R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa

3 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

WWE 2K25: Cara Membuka Segala -galanya Di Myrise

4 minggu yang laluBy尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver Mac版

Alat pembangunan web visual

Versi Mac WebStorm

Alat pembangunan JavaScript yang berguna

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

mPDF

mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7478

Tutorial CakePHP

1377

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi