전처리기 Sass를 사용하는 방법-CSS 튜토리얼-php.cn

이번에는 전처리기 Sass를 어떻게 사용하는지 보여드리고, 전처리기 Sass를 사용할 때 주의사항은 무엇인지 알아보겠습니다.

Sass는 CSS를 강화하는 보조 도구입니다. CSS 구문을 기반으로 하는 변수, 중첩 규칙, 믹스인 및 인라인 가져오기와 같은 고급 기능을 추가하여 CSS를 더욱 강력하고 우아하게 만듭니다. Sass 및 Sass 스타일 라이브러리(예: Compass)를 사용하면 스타일 파일을 더 잘 구성 및 관리하고 프로젝트를 더 효율적으로 개발하는 데 도움이 될 수 있습니다.

1. 기능

CSS3과 완벽하게 호환
CSS 기반 변수, 중첩, 믹스인 및 기타 기능 추가
함수를 사용하여 색상 값 및 속성 값 제어 작업
제어 지시문과 같은 고급 기능 제공
맞춤형 출력 형식

파일 접미사 이름: sass에는 접미사 파일 이름이 두 개 있는데, 하나는 접미사이고 다른 하나는 그렇지 않습니다. 중괄호와 세미콜론을 사용하세요. 여기서 사용하는 scss 파일은 중괄호와 세미콜론을 사용하여 일반적으로 작성하는 CSS 파일 형식과 유사합니다. 이 튜토리얼에서 언급된 모든 sass 파일은 접미사가 scss인 파일을 참조합니다. 또한 sass 접미사의 엄격한 형식 요구 사항으로 인한 오류를 방지하려면 접미사 scss가 있는 파일을 사용하는 것이 좋습니다.

//文件后缀名为sass的语法
body
  background: #eee
  font-size:12px
p
  background: #0982c1
//文件后缀名为scss的语法  
body {
  background: #eee;
  font-size:12px;
}
p{
  background: #0982c1;
}

로그인 후 복사

2. Sass와 Less의 구문 비교

2.1 Sass와 Less의 차이점

컴파일 환경이 다릅니다. Sass는 Ruby 등의 서버사이드 환경을 기반으로 컴파일되며, Less는 서버 측 컴파일과 클라이언트에서 컴파일 가능(브라우저 환경)을 모두 지원합니다
변수 기호는 다릅니다. Sass는 $ 기호를 사용하여 변수를 선언하고 Less는 @ 기호를 사용하여 변수를 선언합니다
The 조건문에 대한 지원이 다릅니다 - Sass는 복잡한 조건문(if..else..와 유사)을 지원하고 Less는 간단한 조건문만 지원합니다(if()..와 유사)
범위 - Sass의 로컬 수정 변수는 영향을 미칠 수 있습니다. 전역 변수, Less only 로컬 범위에서 유효합니다.
외부 CSS 파일을 참조하는 방법은 다릅니다. Sass는 기본적으로 .sass 또는 .scss 파일을 가져올 때 접미사를 무시할 수 있지만 Less는 가져온 파일이 키워드 구성을 통해 처리되는 방식을 제어해야 합니다.

2.2 Sass와 Less의 유사점

Mixins - 함수 또는 매크로와 유사하며 매개변수를 전달할 수 있습니다.
중첩 규칙 - 클래스가 클래스 내에 중첩되므로 중복 코드가 줄어듭니다.

3. Sass 구문의 주요 기능 소개

3.1 CSS 함수 확장

Sass는 CSS 집합을 허용합니다. 중첩할 스타일 다른 스타일 세트에 내부 스타일은 외부 선택자를 상위 선택자로 사용합니다. 중첩 기능은 상위 선택자를 반복적으로 입력하는 것을 방지하고 다음과 같이 복잡한 CSS 구조를 더 쉽게 관리할 수 있도록 합니다.

//sass style or less style
#main p {
  color: #00ff00;
  width: 97%;
  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}
//css style
#main p {
color: #00ff00;
width: 97%; }
#main p .redbox {
  background-color: #ff0000;
  color: #000000; }

로그인 후 복사

상위 선택자&

CSS 규칙을 중첩할 때 중첩된 외부 상위 선택자를 직접 사용해야 하는 경우가 있습니다. 예를 들어 요소에 대한 호버 스타일을 설정하거나 본문 요소에 특정 클래스 이름이 있는 경우 &를 사용하여 상위를 나타낼 수 있습니다. 중첩된 규칙 외부의 선택기입니다.

//sass style or less style
a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}
//css style
a {
font-weight: bold;
text-decoration: none; }
a:hover {
  text-decoration: underline; }
body.firefox a {
  font-weight: normal; }

로그인 후 복사

속성 중첩

일부 CSS 속성은 동일한 네임스페이스(네임스페이스)를 따릅니다. 예를 들어 글꼴 패밀리, 글꼴 크기, 글꼴 가중치는 모두 글꼴을 속성의 네임스페이스로 사용합니다. 이러한 속성의 관리를 용이하게 하고 반복적인 입력을 피하기 위해 Sass는 속성이 네임스페이스에 중첩되도록 허용합니다. 예:

//sass style
.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}
//css style
.funky {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold; }

로그인 후 복사

네임스페이스는 자체 속성 값을 포함할 수도 있습니다. 예:

//sass style
.funky {
  font: 20px/24px {
    family: fantasy;
    weight: bold;
  }
}
//css style
.funky {
  font: 20px/24px;
    font-family: fantasy;
    font-weight: bold; }

로그인 후 복사

3.2 Import

sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如 @import ‘reset.css’，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以 @import 方式存在。

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import “mixin”。

less的导入(@import)语法：@import (keyword) “filename”;

多个关键字 @import 是允许的，你必须使用逗号分隔关键字：example: @import (optional, reference) “foo.less”;

reference: 使用该less文件但是不输出它
inline: 包括在源文件中输出，但是不作处理
less: 将该文件视为less文件，无论其扩展名为什么
css: 将文件视为css文件，无论扩展名为什么
once: 该文件仅可导入一次 (默认)
multiple: 该文件可以多次导入
optional: 当没有发现文件时仍然编译

导入文件代码示例：

/*被导入sass文件a.scss，less文件a.less：*/
//a.scss or a.less
//-------------------------------
body {
  background: #eee;
}
/*需要导入样式的sass文件b.scss，less文件b.less：*/
@import "reset.css";
@import "a";
p{
  background: #0982c1;
}   
/*转译出来的b.css样式：*/
@import "reset.css";
body {
  background: #eee;
}
p{
  background: #0982c1;
}

로그인 후 복사

根据上面的代码可以看出，b.scss编译后，reset.css继续保持import的方式，而a.scss则被整合进来了。同理，less中也是这样处理的。

3.3 注释 /* */ 与 //

Sass 支持标准的 CSS 多行注释 /* */，以及单行注释 //，前者会被完整输出到编译后的 CSS 文件中，而后者则不会。Less中不用担心这一点，Less中多行注释 /* */，以及单行注释 //都可以随意使用，都会在编译过程中被保留。例如：

//sass style
/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }
//css style
/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
  color: black; }
a {
  color: green; }

로그인 후 복사

3.4 SassScript

变量 $

Sass的变量必须是$开头，后面紧跟变量名，如果值后面加上!default则表示默认值。Less的变量与Sass类似，只是使用符号不同，Less中采用的是@

//sass style
//-------------------------------
$fontSize: 12px;
body{
    font-size:$fontSize;
}  
//less style
//-------------------------------
@fontSize: 12px;
body{
    font-size:@fontSize;
}
//css style
//-------------------------------
body{
    font-size:12px;
}

로그인 후 복사

变量默认值

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在使用默认变量之前重新声明下变量即可；默认变量的价值在进行组件化开发的时候会非常有用。

//sass style
//-------------------------------
$baseLineHeight:  1.5 !default;
body{
    line-height: $baseLineHeight; 
}
//css style
//-------------------------------
body{
    line-height:1.5;
}
/*覆盖默认值*/
//sass style
//-------------------------------
$baseLineHeight:  2;
$baseLineHeight:  1.5 !default;
body{
    line-height: $baseLineHeight; 
}
//css style
//-------------------------------
body{
    line-height:2;
}

로그인 후 복사

变量 #{} 的使用形式

一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

//sass style
//-------------------------------
$borderDirection:    top !default; 
$baseFontSize:       12px !default;
$baseLineHeight:     1.5 !default;
//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}
//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

로그인 후 복사

多值变量 list

简单来说list类型有点像js中的数组。list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值。

关于list数据操作还有很多其他函数如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等

定义：

//一维数据
$px: 5px 10px 20px 30px;
//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

로그인 후 복사

使用方法：

//sass style
//-------------------------------
$linkColor:  #08c #333 !default;//第一个值为默认值，第二个鼠标滑过值
a{
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}
//css style
//-------------------------------
a{
  color:#08c;
}
a:hover{
  color:#333;
}

로그인 후 복사

多值变量 map

简单来说map类型有点像es6语法中的map数据结构。map数据以key和value成对出现，其中value又可以是list。

格式为：$map: (key1: value1, key2: value2, key3: value3);可通过map-get($map,$key)取值。关于map数据还有很多其他函数如map-merge($map1,$map2)，map-keys($map)，map-values($map)等

定义：

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

로그인 후 복사

使用方法：

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

로그인 후 복사

变量作用域

Sass和Less中的变量作用域分别类似与javascript中的两种变量申明方式，下面一段代码可以对比出变量声明时的不同处理方式。

Sass中的变量赋值直接修改全局变量，Less中的变量赋值可只在局部生效。

//Sass style
$color:red; 
p{ 
  $color:blue; 
  color:$color;//blue 
} 
a{ 
  color:$color;//blue 
}
//Less style
@color:red; 
p{ 
  @color:blue; 
  color:@color;//blue 
} 
a{ 
  color:@color;//red 
}

로그인 후 복사

3.5 混合(mixin)

sass中使用@mixin声明混合，可以传递参数，也可以给参数设置默认值。声明的@mixin通过@include来调用；在less中只需要将定义好的class用类似函数的方式直接引用。

无参数 mixin

//sass style
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}
//less style
.center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    .center-block;
}
//css style
.demo{
    margin-left:auto;
    margin-right:auto;
}

로그인 후 복사

有参数 mixin

//sass style
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}
.opacity-80{
  @include opacity(80); //传递参数
}
//less style
.opacity(@opacity:50) {
  opacity: @opacity / 100;
  filter: alpha(opacity=@opacity);
}
.opacity-80{
  .opacity(80); //传递参数
}
//css style
.opacity-80{
  opacity: .8;
  filter: alpha(opacity=80);
}

로그인 후 복사

多个参数 mixin

Sass调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入；Less中使用方法类似。

//sass style   
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
//less style
.horizontal-line(@border:1px dashed #ccc, @padding:10px){
    border-bottom:@border;
    padding-top:@padding;
    padding-bottom:@padding;  
}
.imgtext-h li{
    .horizontal-line(1px solid #ccc);
}
//css style
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}

로그인 후 복사

多组值参数 mixin

Sass中如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables…；Less表示不定参数时可以直接使用 … 表示，并用@arguments表示所有参数

//sass style   
//box-shadow可以有多组值，所以在变量参数后面添加...
@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//less style
.box-shadow(...) {
  -webkit-box-shadow:@arguments;
  box-shadow:@arguments;
}
.box{
  border:1px solid #ccc;
  .box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}
//css style
.box{
  border:1px solid #ccc;
  -webkit-box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
  box-shadow:0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3);
}

로그인 후 복사

3.6 运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量、字符串等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

//计算数值、变量
$baseFontSize:          14px !default;
$baseLineHeight:        2 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default; // => 28px
$halfBaseGap:           $baseGap / 4  !default; // => 7px
$samllFontSize:         $baseFontSize - 2px  !default; // => 12px
$_columns:              12 !default;  
$_column-width:         60px !default;  
$_gutter:               20px !default;     
$_gridsystem-width:     $_columns * ($_column-width + $_gutter); // => 960px
//计算颜色
p {
  color: #010203 + #040506; // => #050709
}
//计算字符串
p:before {
  content: "Foo " + Bar; // => "Foo Bar"
  font-family: sans- + "serif"; // => sans-serif
}

로그인 후 복사

3.7 控制指令

SassScript 提供了一些基础的控制指令，比如在满足一定条件时引用样式，或者设定范围重复输出格式。控制指令是一种高级功能，日常编写过程中并不常用到，主要与混合指令 (mixin) 配合使用。

@if

//sass style
p {
  @if 1 + 1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}
//css style
p {
border: 1px solid; }
//sass style
$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}
//less style
@type: monster;
p (@type) when (@type = ocean){color: blue;}
p (@type) when (@type = matador){color: red;}
p (@type) when (@type = monster){color: green;}
p (@type) when (@type = dark){color: black;}
//css style
p {
color: green; }

로그인 후 복사

@for

@for 指令包含两种格式：@for $var from through ，或者 @for $var from to ，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含与的值，而使用 to 时条件范围只包含的值不包含的值。另外，$var 可以是任何变量，比如 $i；和必须是整数值。

//sass style
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}
//css style
.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

로그인 후 복사

@each

语法为：@each $var in 。其中$var表示变量，而list和map表示list类型数据和map类型数据。

单个字段list数据循环：

//sass style
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}
//css style
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}

로그인 후 복사

多个字段list数据循环：

//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}
//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; 
}

로그인 후 복사

多个字段map数据循环：

//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}
//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

로그인 후 복사

@extend

@extend 的作用是将重复使用的样式 (.error) 延伸 (extend) 给需要包含这个样式的特殊样式（.seriousError），例子：

//sass style
//-------------------------------
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
//css style
//-------------------------------
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; }
.error.intrusion, .seriousError.intrusion {
  background-image: url("/image/hacked.png"); }
.seriousError {
  border-width: 3px; }

로그인 후 복사

3.8 函数指令

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：

//sass style
//-------------------------------
$grid-width: 40px;
$gutter-width: 10px;
@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}
#sidebar { width: grid-width(5); }
//css style
//-------------------------------
#sidebar {
  width: 240px; }

로그인 후 복사

与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果。

Sass 函数允许使用关键词参数，上面的例子也可以写成：

//关键词参数调用形式
#sidebar { width: grid-width($n: 5); }

로그인 후 복사

虽然不够简明，但是阅读起来会更方便。关键词参数给函数提供了更灵活的接口，以及容易调用的参数。关键词参数可以打乱顺序使用，如果使用默认值也可以省缺，另外，参数名被视为变量名，下划线、短横线可以互换使用。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

Php8, 나도 갈게

30분 안에 웹사이트 레이아웃 배우기

Shangguan Oracle 초보자부터 능숙한 비디오 튜토리얼까지

UNI-APP 코드의 첫 번째 줄

처음부터 앱 실행까지 Flutter

Lian 형제 새 Linux 비디오 튜토리얼

AXURE 9 비디오 튜토리얼(제품 관리자 대화형 제품 디자인 UI에 적합)

Zero 기본 숙련도 PS 비디오 튜토리얼

시작하는 데 도움이 되는 16일 UI 비디오 튜토리얼

PS 기술 및 슬라이싱 기술 비디오 튜토리얼

Alibaba Cloud 환경 구축 및 프로젝트 출시 비디오 튜토리얼

컴퓨터 네트워크 개요 - 프로그래머가 마스터해야 하는 기본 지식

프로그래머를 위한 필수 튜토리얼 - HTTP 프로토콜 설명

웹소켓 비디오 튜토리얼

전처리기 Sass를 사용하는 방법