Sass 고급 구문-HTML 튜토리얼-php.cn

집

웹 프론트엔드

HTML 튜토리얼

Sass 고급 구문

Aug 30, 2016 am 09:21 AM

github 주소: https://github.com/lily1010/sass/tree/master/course03

사용된 sass 구문은 다음과 같습니다.

sass --watch test.scss:test.css --style 확장됨

아래와 같습니다.

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 확장 함수는 클래스 이름 선택기의 스타일을 상속할 뿐만 아니라 상위 선택기 상속을 포함하여 이와 관련된 스타일도 상속합니다.

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 확장 함수, 단일 요소 선택기 스타일을 상속하고 상위 선택기 상속을 포함하여 이와 관련된 스타일을 상속합니다.

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개 확장

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 확장에서 존재하지 않는 스타일을 상속할 때 발생하는 오류를 방지하려면 !ional을 사용하여 빈 스타일을 직접 건너뛰세요.

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:class name)는 선택기를 중첩된 지시문 외부로 이동합니다

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...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 &lt; 3<span style="color: #000000;"> {
        width: 100px;
    }
}
.test81 {  </span>//<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 &gt; 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 &lt; 3<span style="color: #000000;"> { 
        width: 100px;
    }
    @</span><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> &lt;start&gt; through &lt;end&gt;,注意范围包括&lt;start&gt;和&lt;end&gt;<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> &lt;start&gt; to &lt;end&gt;,注意范围从&lt;start&gt;开始运行，但不包括&lt;end&gt;<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>

로그인 후 복사

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 $var in <list or map>

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 &gt; 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>

로그인 후 복사

@mixin 범위 내에서는 15개의 변수가 혼합되어 있습니다. 즉, 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>

로그인 후 복사

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫툴 태그

코드앤아이

오디오

사업

마케팅

AI감지기

챗봇

디자인&아트

뜨거운 기사 태그

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?

7109

자바 튜토리얼

1534

라라벨 튜토리얼

1254

PHP 튜토리얼

1205

Cakephp 튜토리얼

1152

Related knowledge

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까? Mar 04, 2025 pm 12:32 PM

공식 계정 웹 페이지의 캐싱 업데이트에 어려움 : 버전 업데이트 후 사용자 경험에 영향을 미치는 이전 캐시를 피하는 방법은 무엇입니까?

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까? Mar 17, 2025 pm 12:27 PM

HTML5 양식 유효성 검사 속성을 사용하여 사용자 입력을 유효성있게하려면 어떻게합니까?

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까? Mar 04, 2025 pm 02:39 PM

웹 페이지의 PNG 이미지에 뇌졸중 효과를 효율적으로 추가하는 방법은 무엇입니까?

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까? Mar 20, 2025 pm 06:05 PM

& lt; iframe & gt; 꼬리표? 보안을 사용할 때 보안 고려 사항은 무엇입니까?

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까? Mar 18, 2025 pm 02:51 PM

iframes 사용의 보안 영향은 무엇이며 어떻게 완화 할 수 있습니까?

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까? Mar 17, 2025 pm 12:20 PM

HTML5의 크로스 브라우저 호환성에 대한 모범 사례는 무엇입니까?

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소? Mar 12, 2025 pm 04:05 PM

html5 & lt; time & gt; 의미 적으로 날짜와 시간을 나타내는 요소?

html5 & lt; meter & gt; 범위 내에 숫자 데이터를 표시하는 요소? Mar 12, 2025 pm 04:08 PM

html5 & lt; meter & gt; 범위 내에 숫자 데이터를 표시하는 요소?

See all articles

Sass 고급 구문

인기 기사

핫툴 태그

인기 기사

뜨거운 기사 태그

메모장++7.3.1

SublimeText3 중국어 버전

스튜디오 13.0.1 보내기

드림위버 CS6

SublimeText3 Mac 버전

뜨거운 주제