Sass 중급 문법
github 주소: https://github.com/lily1010/sass/tree/master/course02
사용된 sass 구문은 다음과 같습니다.
sass --watch test.scss:test.css --style Compact --style Expanded
아래와 같습니다.
1 클래스 이름 중첩
test.scss의 내용은 다음과 같습니다.
<span style="color: #000000;">.test1 { font-size: .15rem; p{ color: #333; .test11 { width: 3px; } } }</span>
test.css에 컴파일된 내용은 다음과 같습니다.
<span style="color: #000000;">.test1 { font-size: .15rem; } .test1 p { color: #333; } .test1 p .test11 { width: 3px; }</span>
2개 속성 중첩
test.scss의 내용은 다음과 같습니다.
<span style="color: #000000;">.test2 { margin: { left: 10px; right: 20px; } } .test21 { margin: 0 0 0 0{ /*命名空间也可以有自己的属性*/ left: 10px; right: 20px; } }</span>
test.css에 컴파일된 내용은 다음과 같습니다.
<span style="color: #000000;">.test2 { margin-left: 10px; margin-right: 20px; } .test21 { margin: 0 0 0 0; margin-left: 10px; margin-right: 20px; }</span>
3 상위 선택자를 참조하여 상위 선택자의 위치를 정확히 지정한 후 반전하여 상위 선택자가 됩니다.
test.scss의 내용은 다음과 같습니다.
<span style="color: #000000;">.a { font-size: .15rem; &:hover { //引用父选择器 color: red; } .ll { //精确定位父选择器 color: black; &:hover { height: 20px; } } .test3 & { //反向成为父选择器 width: 10px; } }</span>
test.css에 컴파일된 내용은 다음과 같습니다.
<span style="color: #000000;">.a { font-size: .15rem; } .a:hover { color: red; } .a .ll { color: black; } .a .ll:hover { height: 20px; } .test3 .a { width: 10px; }</span>
4개의 전역 변수
test.scss의 내용은 다음과 같습니다.
<span style="color: #000000;">/*方法一*/ $color: red; .test4 { color: $color; } /*方法二*/ .test41 { $red: red !global; color: $red; } .test42 { color: $red; }</span>
test.css에 컴파일된 내용은 다음과 같습니다.
<span style="color: #000000;">/*方法一*/ .test4 { color: red; } /*方法二*/ .test41 { color: red; } .test42 { color: red; }</span>
5 인용된 문자열은 인용되지 않은 문자열로 컴파일됩니다.
test.scss의 내용은 다음과 같습니다.
<span style="color: #000000;">@mixin test5($left) { //此处$不可去掉 border-#{$left}:1px #000 solid; left: 20px; top: 10px; } .lili2 { @include test5("left"); }</span>
test.css에 컴파일된 내용은 다음과 같습니다.
<span style="color: #000000;">.lili2 { border-left: 1px #000 solid; left: 20px; top: 10px; }</span>
6 분단에 대해 알아보기
test.scss의 내용은 다음과 같습니다.
<span style="color: #000000;">/*需要注意:Sass 数学函数在算术运算期间会保留单位 *可以将/解析为除法三种情况 *(1)如果该值,或值的任何部分,存储在一个变量中或通过函数返回。 * (2)如果该值是由括号括起来的,除非这些括号是在一个列表(list)外部,并且值是括号内部。 * (3)如果该值被用作另一个算术表达式的一部分。 */ p { font-size: 10px/2px; // 原生的CSS,不作为除法 $width: 100px; width: $width/2; height: (100px/2); margin-left: 5px + 8px/2px; }</span>
test.css에 컴파일된 내용은 다음과 같습니다.
<span style="color: #000000;">p { font-size: 10px/2px; width: 50px; height: 50px; margin-left: 9px; }</span>
7색 연산
test.scss의 내용은 다음과 같습니다.
<span style="color: #000000;">.test7 { color: #302010 + #333333; } .test71 { color: #010101 * 2; } .test72 { color: rgba(0,0,0,0.3) + rgba(1,1,1,0.3); //必须具有相同的alpha值,才能进行颜色运算,但是alpha不变 } /*如果想让alpha值变化,则需要计算函数*/ .test73 { color: opacify(rgba(0,0,0,0.3),0.3); }</span>
test.css에 컴파일된 내용은 다음과 같습니다.
<span style="color: #000000;">.test7 { color: #635343; } .test71 { color: #020202; } .test72 { color: rgba(1, 1, 1, 0.3); } /*如果想让alpha值变化,则需要计算函数*/ .test73 { color: rgba(0, 0, 0, 0.6); }</span>
8가지 문자열 연산
test.scss의 내용은 다음과 같습니다.
<span style="color: #000000;">.test8 { width: 2px + 3px; } .test81::after { //带引号字符串和不带引号字符串,谁在前面就以谁为主 font-family: "arial" + black; content: lala + "lili"; } $value: 20; //在字符串里面插入动态值 .test82::before { content: "wo ke yi #{$value} lili"; }</span>
test.css에 컴파일된 내용은 다음과 같습니다.
<span style="color: #000000;">.test8 { width: 5px; } .test81::after { font-family: "arialblack"; content: lalalili; } .test82::before { content: "wo ke yi 20 lili"; }</span>
9개의 괄호는 우선순위를 높입니다
test.scss의 내용은 다음과 같습니다.
<span style="color: #000000;">.test9 { width: 1px + (2px * 3); }</span>
test.css에 컴파일된 내용은 다음과 같습니다.
<span style="color: #000000;">.test9 { width: 7px; }</span>
10 기본 변수 !default
test.scss의 내용은 다음과 같습니다.
<span style="color: #000000;">/*如果分配给变量的值后面添加了!default标志 ,这意味着该变量如果已经赋值,那么它不会被重新赋值,但是,如果它尚未赋值,那么它会被赋予新的给定值。*/ $color: red; $color: pink !default; .test10 { color: $color; }</span>
test.css에 컴파일된 내용은 다음과 같습니다.
<span style="color: #000000;">.test10 { color: red; }</span>

핫 AI 도구

Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool
무료로 이미지를 벗다

Clothoff.io
AI 옷 제거제

AI Hentai Generator
AI Hentai를 무료로 생성하십시오.

인기 기사

뜨거운 도구

메모장++7.3.1
사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경

드림위버 CS6
시각적 웹 개발 도구

SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)

뜨거운 주제











이 기사는 HTML & lt; Progress & Gt에 대해 설명합니다. 요소, 그 목적, 스타일 및 & lt; meter & gt의 차이; 요소. 주요 초점은 & lt; progress & gt; 작업 완료 및 & lt; meter & gt; Stati의 경우

이 기사는 HTML & LT; Datalist & GT에 대해 논의합니다. 자동 완성 제안을 제공하고, 사용자 경험을 향상시키고, 오류를 줄임으로써 양식을 향상시키는 요소. 문자 수 : 159

이 기사는 HTML & lt; meter & gt에 대해 설명합니다. 범위 내에 스칼라 또는 분수 값을 표시하는 데 사용되는 요소 및 웹 개발의 일반적인 응용 프로그램. & lt; meter & gt; & lt; Progress & Gt; 그리고 Ex

이 기사는 모바일 장치의 반응 형 웹 디자인에 필수적인 Viewport Meta Tag에 대해 설명합니다. 적절한 사용이 최적의 컨텐츠 스케일링 및 사용자 상호 작용을 보장하는 방법을 설명하는 반면, 오용은 설계 및 접근성 문제로 이어질 수 있습니다.

HTML은 간단하고 배우기 쉽고 결과를 빠르게 볼 수 있기 때문에 초보자에게 적합합니다. 1) HTML의 학습 곡선은 매끄럽고 시작하기 쉽습니다. 2) 기본 태그를 마스터하여 웹 페이지를 만들기 시작하십시오. 3) 유연성이 높고 CSS 및 JavaScript와 함께 사용할 수 있습니다. 4) 풍부한 학습 리소스와 현대 도구는 학습 과정을 지원합니다.

이 기사는 & lt; iframe & gt; 외부 컨텐츠를 웹 페이지, 공통 용도, 보안 위험 및 객체 태그 및 API와 같은 대안을 포함시키는 태그의 목적.

HTML은 웹 구조를 정의하고 CSS는 스타일과 레이아웃을 담당하며 JavaScript는 동적 상호 작용을 제공합니다. 세 사람은 웹 개발에서 의무를 수행하고 화려한 웹 사이트를 공동으로 구축합니다.

anexampleStartingtaginhtmlis, whithbeginsaparagraph.startingtagsareessentialinhtmlastheyinitiate rements, definetheirtypes, andarecrucialforstructurituringwebpages 및 smanstlingthedom.
