Scss의 기본 구문과 SASS 파일을 가져오는 방법에 대한 간략한 분석

이 글에서는 가장 기본적인 사용법과 구문을 주로 소개합니다. Scss에서 도입한 변수와 중첩이 자체 보간 표현식과 결합되어 CSS 스타일 작성이 매우 유연하다는 것을 알 수 있습니다.

Sass 구문 소개

sass에는 Sass(초기 들여쓰기 형식: Indented Sass)와 SCSS(Sassy CSS)의 두 가지 구문 형식이 있습니다

현재 가장 일반적으로 사용되는 것은 SCSS이며 모든 CSS 파일은 scss로 변경하면 Sassy CSS 구문을 사용하여 직접 작성할 수 있습니다. Sassy CSS语法编写。

所有有效的 CSS 也同样都是有效的 SCSS。

使用变量

sass使用$符号来标识变量。

变量的作用就是，让你在整个样式表中保存并重用一些信息或数据。

比如存储颜色(color)、字体集，或任何你想重用的CSS值。

1. 变量声明

和css属性的声明（property declaration）很像！

如，声明值为 #F90 的变量 $highlight-color，字体集变量：

$highlight-color: #F90;
$font-stack: Helvetica, sans-serif;
 
body {
    font: 100% $font-stack;
    color: $highlight-color;
}

输出结果为：

body {
    font: 100% Helvetica, sans-serif;
    color: #F90;
}

变量有作用域，当变量定义在css规则块内，则该变量只能在此规则块内使用。

2. 变量引用

凡是css属性的标准值（比如说1px或者bold）可存在的地方，就可以使用变量。

css生成时，变量会被它们的值所替代。

$color:#A34554;

.box {
  width: 300px;
  height: 400px;
  &-left{
    width: 30%;
    color: $color;
  }
}

生成css为：

.box {
    width: 300px;
    height: 400px;
}
.box-left{
    width: 30%;
    color: #A34554;
}

声明变量时，变量的值也可以引用其他变量，如下 $highlight-border 变量中使用了 $highlight-color 变量：

$highlight-color: #F90;
$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}

//编译后

.selected {
  border: 1px solid #F90;
}

3. 变量名中的中横线(hyphen)和下划线(underscore)

sass的变量名可以使用中划线和下划线，用中划线声明的变量可以使用下划线的方式引用，反之亦然。

也就是，变量名中的中横线和下划线没有区别，两者互通。

比如下面的示例，中横线的$link-color，可以通过下划线的$link_color引用。

$link-color: blue;
a {
  color: $link_color;
}

//编译后

a {
  color: blue;
}

相对，使用中横线更普遍些！

嵌套（<span style="font-size: 18px;">Nesting</span>）

css中重复写选择器是非常恼人的。尤其是嵌套的html元素样式，如：

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

Scss的嵌套

Sass中，借助在规则块中嵌套子规则块，可以使重复选择器只写一遍，避免重复而且可读性更高。

比如上面的示例，借助scss嵌套：

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

scss嵌套打开(解析)的规则是：从外层到内层，将嵌套规则块打开，父级的选择器放在子级选择的前面组成一个新的选择器，然后再循环打开内部的嵌套块处理。

父选择器的标识符&

通常，sass解析嵌套时，把父选择器（#content）通过一个空格连接到子选择器的前边（article和aside）形成（#content article和#content aside），即生成后代选择器。

但是对于伪类:hover、对于多class名等情况，则不应该以"后代选择器"的方式连接，比如：

article a {
  color: blue;
  :hover { color: red }
}

默认生成的article a :hover会让article元素内a链接的所有子元素在被hover时都会变成红色，显然是不正确的（应该应用到a自身）。

为此sass提供了一种特殊的选择器：父选择器&。它可以更好的控制嵌套规则！

只要是选择器可以放置的地方，就都可以在嵌套中同样使用&。

article a {
  color: blue;
  &:hover { color: red }
}

展开时，&被父选择器直接替换：

article a { color: blue }
article a:hover { color: red }

通过&可以在嵌套块内，实现在父选择器之前添加选择器（非常灵活）。

如：

#content aside {
  color: red;
  body.ie & { color: green }
}

群组选择器嵌套

css中，使用,

모든 유효한 CSS는 유효한 SCSS이기도 합니다.

🎜변수 사용🎜🎜🎜sass는 $ 기호를 사용하여 변수를 식별합니다. 🎜🎜변수의 목적은 스타일시트 전체에서 일부 정보나 데이터를 저장하고 재사용할 수 있도록 하는 것입니다. 🎜🎜재사용하려는 색상, 글꼴 세트 또는 CSS 값 저장 등. 🎜🎜🎜1. 변수 선언🎜🎜🎜은 CSS 속성 선언(속성 선언)과 매우 유사합니다! 🎜🎜예를 들어 변수 $highlight-color를 #F90 값으로 선언하고 글꼴 설정 변수를 다음과 같이 선언합니다. 🎜

h1, h2 {
  margin: 0;
}

🎜출력 결과는 다음과 같습니다. 🎜

.container h1, .container h2, .container h3 { margin-bottom: .8em }

🎜🎜 변수에는 범위가 있습니다. CSS 규칙 블록 내에서 변수가 정의되면 해당 변수는 이 규칙 블록 내에서만 사용할 수 있습니다. 🎜🎜🎜🎜2. 변수 참조🎜🎜🎜변수는 CSS 속성의 표준 값(예: 1px 또는 굵은 글꼴)이 존재할 수 있는 모든 곳에서 사용할 수 있습니다. 🎜🎜CSS가 생성되면 변수는 해당 값으로 대체됩니다. 🎜

.container{
  h1,h2,h3{
    margin-bottom:.8em;
  }
}

🎜생성된 CSS는 다음과 같습니다. 🎜

nav, aside {
  a {color: blue}
}

// nav a, aside a {color: blue}

🎜변수를 선언할 때 변수 값은 아래와 같이 다른 변수를 참조할 수도 있습니다. $highlight-border는 $highlight-color를 사용합니다. 변수 변수: 🎜

/* 子组合选择器> */
article > section { border: 1px solid #ccc }

/* 相邻组合选择器+  选择 元素后紧跟的指定元素 */
header + p { font-size: 1.1em }

/* 同层全体组合选择器~，选择所有跟在article后的同层article元素 */
article ~ article { border-top: 1px dashed #ccc }

🎜🎜3. 변수 이름의 하이픈(hyphen)과 밑줄(underscore)은 sass 변수 이름에 사용할 수 있습니다. . 밑줄, 밑줄로 선언된 변수는 밑줄로 참조될 수 있으며 그 반대도 마찬가지입니다. 🎜🎜즉, 변수 이름에 대시와 밑줄의 차이가 없으며 상호 운용이 가능합니다. 🎜🎜예를 들어 아래 예에서 점선 $link-color는 밑줄이 있는 $link_color로 참조될 수 있습니다. 🎜

article {
  /* 放在 里层选择器前边 */
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  /* 放在 外层选择器后边 */
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

🎜반면에 수평선을 사용하는 것이 더 일반적입니다! 🎜

🎜🎜중첩(중첩 code >)🎜🎜🎜CSS에서 선택기를 반복적으로 작성하는 것은 매우 짜증나는 일입니다. 특히 다음과 같은 중첩된 HTML 요소 스타일: 🎜

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

🎜🎜Scss 중첩🎜🎜🎜Sass에서는 규칙 블록에 중첩 자막을 사용하여 규칙 블록을 사용하면 반복 선택자를 한 번만 작성할 수 있으므로 중복을 피하고 더 쉽게 읽을 수 있습니다. 🎜🎜예를 들어, 위의 예에서 scss 중첩의 도움으로: 🎜

nav {
  border: {
     style: solid;
     width: 1px;
     color: #ccc;
  }
}

🎜scss 중첩 열기(파싱) 규칙은 다음과 같습니다. 🎜외부 레이어에서 내부 레이어까지 중첩된 규칙 블록을 열고 자식의 부모 선택기 선택의 앞부분이 새로운 선택기를 형성한 다음 내부 중첩 블록 처리가 루프에서 열립니다. 🎜🎜🎜🎜상위 선택자의 식별자&🎜🎜🎜보통 Sass가 중첩을 구문 분석할 때 상위 선택자(#content )는 공백으로 하위 선택기(article 및 aside)의 앞면과 연결되어 형식(#content 기사 및 )을 형성합니다. # 콘텐츠는 제외), 이는 하위 항목 선택기를 생성합니다. 🎜🎜그러나 의사 클래스 :hover, 여러 클래스 이름 등의 경우 다음과 같은 "하위 선택기"로 연결하면 안 됩니다. 🎜

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

🎜기본적으로 생성된 기사 a : hover는 마우스를 가져가면 기사 요소 내 a 링크의 모든 하위 요소가 빨간색으로 변하게 합니다. 이는 분명히 잘못된 것입니다(a 자체에 적용해야 함). 🎜🎜Sass는 이를 위한 특별한 선택자, 즉 상위 선택자 &를 제공합니다. 중첩된 규칙을 더 잘 제어할 수 있습니다! 🎜

🎜선택자를 배치할 수 있는 한 중첩 시 &를 사용할 수도 있습니다. 🎜

nav {
  border: 1px solid #ccc {
    /* 单独设置的 子属性 */
     left: 0px;
     right: 0px;
  }
}

/* 生成后 */
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

🎜확장되면 &는 상위 선택자로 직접 대체됩니다. 🎜

$bWidth:5px;
$style:"blue";

.nav {
    border: #{$bWidth} solid #ccc;
    &.nav-#{$style} {
        color: #{$style};
    }
}


// 编译为：
.nav {
  border: 5px solid #ccc;
}
.nav.nav-blue {
  color: blue;
}

🎜 &를 통해 중첩된 상위 선택자 앞에 구현할 수 있습니다. block 선택기를 추가합니다(매우 유연함). 🎜🎜예: 🎜

$value:grayscale(50%);
$property:filter;

.nav{
   #{$property}: $value;
}

// 编译为：
.nav {
   filter: grayscale(50%);
}

🎜🎜그룹 선택기 중첩🎜🎜🎜Css, , 를 사용하여 그룹 구분 선택기는 스타일을 적용할 수 있습니다. 🎜

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", " ");

🎜와 같이 동시에 여러 선택기에 적용할 수 있습니다. 그러나 특정 컨테이너 요소 내의 여러 요소에 그룹 선택기를 적용하려면 반복 작업이 많이 필요합니다. 🎜

@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: " ";
}

🎜그러나 포함된 그룹 선택기를 풀 때 sass의 중첩 기능은 각 포함된 선택기를 올바르게 결합합니다. 🎜

.container{
  h1,h2,h3{
    margin-bottom:.8em;
  }
}

sass会组合成 .container h1、 .container h2、.container h3 三者的群组选择器：.container h1, .container h2, .container h3{ xxx }。

同样，群组选择器内的嵌套也会以这种方式解析：

nav, aside {
  a {color: blue}
}

// nav a, aside a {color: blue}

子组合选择器和同层组合选择器：>、+和~

这三种选择器必须和其他选择器配合使用。

/* 子组合选择器> */
article > section { border: 1px solid #ccc }

/* 相邻组合选择器+  选择 元素后紧跟的指定元素 */
header + p { font-size: 1.1em }

/* 同层全体组合选择器~，选择所有跟在article后的同层article元素 */
article ~ article { border-top: 1px dashed #ccc }

在sass中使用时，可以通过嵌套直接生成正确的结果（位于外层选择器的后面，或内层选择器的前面均可！），而不需要使用&。

article {
  /* 放在 里层选择器前边 */
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  /* 放在 外层选择器后边 */
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

解开后的css为：

article ~ article { border-top: 1px dashed #ccc }
article > footer { background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

最后一句，nav + & 使用父选择器&后，原本默认的嵌套规则不再适用，而是直接应用 & 组合的结果。

属性嵌套

sass中，属性也可以进行嵌套！

把属性名从中划线-的地方断开，在该属性后边添加一个冒号:，紧跟一个{ }块，把子属性部分写在这个{ }块中。这样就可以实现属性的嵌套。

nav {
  border: {
     style: solid;
     width: 1px;
     color: #ccc;
  }
}

编译生成如下：

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

结合属性的缩写形式，可以实现在嵌套属性中指明需要额外样式的特殊子属性。

nav {
  border: 1px solid #ccc {
    /* 单独设置的 子属性 */
     left: 0px;
     right: 0px;
  }
}

/* 生成后 */
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

插值（<span style="font-size: 18px;">Interpolation</span>）

类似 es6 中的插值表达式，Sass也提供了插值计算的方式。

插值几乎可以用在任何地方，作为一个 SassScript 表达式的嵌入结果。

Sass的插值写法为：#{$variable_name}。

利用插值动态生成选择器、属性名和值

可以使用插值获取变量或函数调用到一个选择器、或属性值。

比如：

$bWidth:5px;
$style:"blue";

.nav {
    border: #{$bWidth} solid #ccc;
    &.nav-#{$style} {
        color: #{$style};
    }
}


// 编译为：
.nav {
  border: 5px solid #ccc;
}
.nav.nav-blue {
  color: blue;
}

属性名使用插值变量

使用插值的一个好处是，可以直接将变量值作为属性名使用。

如下，通过插值，属性名直接用变量来替代，这样就可以动态生成属性。

不使用插值，直接在属性的位置使用变量$property，将会被处理为对变量的赋值！

$value:grayscale(50%);
$property:filter;

.nav{
   #{$property}: $value;
}

// 编译为：
.nav {
   filter: grayscale(50%);
}

在 @mixin 中使用插值

@mixin 混合器将在下一节介绍。

插值在写mixin时非常有用，比如下面通过传递的参数创建选择器（来自官网）：

@mixin define-emoji($name, $glyph) {
  span.emoji-#{$name} {
    font-family: IconFont;
    font-variant: normal;
    font-weight: normal;
    content: $glyph;
  }
}

@include define-emoji("women-holding-hands", " ");

编译后的CSS为：

@charset "UTF-8";
span.emoji-women-holding-hands {
  font-family: IconFont;
  font-variant: normal;
  font-weight: normal;
  content: " ";
}

css的特殊函数（<span style="font-size: 18px;">Special Functions</span>【仅作了解】）

CSS中的许多函数都可以在Sass中正常使用，但也有一些特殊的函数有所不同。

所有的特殊函数，调用都返回不带引号的字符串。

url()

url() 函数在CSS中很常见，但是它的参数可以是带引号或不带引号的URL。

不带引号的URL在 Sass 中是无效的，所以需要特殊逻辑进行解析。

如下是url()的示例，如果url()的参数是有效的不带引号URL，Sass会原样解析它，并且不带引号时也可以使用插值表达式；如果不是有效的不带符号URL，将会解析其中的变量或函数，并转换为普通的CSS函数调用。

$roboto-font-path: "../fonts/roboto";

@font-face {
    // 引号中作为一个正常的函数调用解析
    src: url("#{$roboto-font-path}/Roboto-Thin.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 100;
}

@font-face {
    // 使用数学表达式，解析为普通的函数调用
    src: url($roboto-font-path + "/Roboto-Light.woff2") format("woff2");

    font-family: "Roboto";
    font-weight: 300;
}

@font-face {
    // 作为一个插值表达式特殊处理
    src: url(#{$roboto-font-path}/Roboto-Regular.woff2) format("woff2");

    font-family: "Roboto";
    font-weight: 400;
}

calc(), clamp(), element()

算数表达式 calc() 和 Sass 的冲突；element() 的参数可以color。

使用它们时，Sass除了处理插值，其他都会保持原样解析！

min() 和 max()

Sass早于CSS支持使用 min() 和 max()，为了兼容所以需要特殊处理。

如果 min() 和 max() 函数调用的是普通CSS，则会被编译为CSS的  min() 和 max()。

普通CSS（Plain CSS）包含嵌套调用 calc(), env(), var(), min(), max() 以及 插值。

但是，只要包含 SassScript 的特性，比如 Sass的变量、函数调用，min() 和 max() 就会被作为 Sass 的函数处理。

$padding: 12px;

.post {
  // max()没有使用插值以外的Sass特性, 所以将会被编译为 CSS 的 max().
  padding-left: max(#{$padding}, env(safe-area-inset-left));
  padding-right: max(#{$padding}, env(safe-area-inset-right));
}

.sidebar {
  // 应为没有通过插值使用sass变量，此处会调用Sass内置的 max()
  padding-left: max($padding, 20px);
  padding-right: max($padding, 20px);
}

注释

sass另外提供了一种不同于css标准注释格式/* ... */的注释语法，即静默注释，以//开头，直到行末结束。

在生成的css中，静默注释将会被抹除，这样，可以按需抹除一些注释，而不需要全部显示给其他人。

body {
  color: #333; // 这种注释内容不会出现在生成的css文件中
  padding: 0; /* 这种注释内容会出现在生成的css文件中 */
}

当标准注释 /* ... */ 出现在原生css不允许的地方时，也会在编译后的css中被抹去。

多行注释 /* ... */ 在 compressed 模式下会被移除，但是如果以 /*! 开头，则仍会包含在生成的 CSS 中。

导入SASS文件

使用@import可以导入另外的sass文件（在生成css文件时会把相关文件导入进来）。在被导入文件中定义的变量和混合器maxin等均可在导入文件中使用。

css中的@import导入其他css文件很不常用，因为它是在执行到@import规则时才会加载其他的css文件，这会导致页面加载变慢、样式的错乱和延迟等问题。

注：Sass官方目前已经开始打算用 @use 替代 @import 规则，因此鼓励使用 @use。但是，目前只有 Dart Sass 支持 @use，因此，现阶段主要还是使用 @import。

scss导入sidebar.scss文件，可以使用如下规则：

@import "sidebar";

@import "sidebar.scss";

sass局部文件（或分部文件，<span style="font-size: 18px;">partial file</span>）

有的sass文件是专门用于被@import命令导入的，而不需要单独生成css文件，这样的文件称为局部文件。

sass的约定是：sass局部文件的文件名以下划线 _ 开头，sass在编译时就不会将这个文件编译输出为css。

在 @import 局部文件时，可以省略文件开头的下划线和.scss后缀，不需要写文件的全名。

局部文件可以被多个不同的文件引入。对于需要在多个页面甚至多个项目中使用的样式，非常有用。

默认变量值

通常情况下，在反复多次声明一个变量时，只有最后一个声明有效（即使用最后一个声明赋予的值）。

sass通过!default标签可以实现定义一个默认值（类似css的!important标签对立），!default表示如果变量被声明赋值了则用新声明的值，否则用默认值。

比如一个局部文件中：

$fancybox-width: 400px !default;
.fancybox {
  width: $fancybox-width;
}

如果用户在导入该sass局部文件之前，声明了一个 $fancybox-width 变量，那么局部文件中对 $fancybox-width 赋值400px的操作就无效。如果用户没有做这样的声明，则 $fancybox-width 将默认为400px。

也就是，在后面使用 !default 声明的变量，并不会覆盖其前面声明赋值的相同变量值。

嵌套导入

sass可以在嵌套规则块的内部使用@import导入局部文件【局部文件会被直接插入到css规则内导入它的地方】。

如局部文件_blue-theme.sass内容为：

aside {
  background: blue;
  color: white;
}

将它导入到一个CSS规则内：

.blue-theme {@import "blue-theme"}

生成的结果跟你直接在 .blue-theme 选择器内写 _blue-theme.scss 文件中的内容完全一样。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

原生的CSS导入的支持

sass中支持原生css的导入，会生成原生的scc @import(在浏览器解析css时再下载并解析)。

sass中@import生成原生css导入的条件是：

• 被导入文件的名字以.css结尾；
• 被导入文件的名字是一个URL地址（比如http://www.sass.hk/css/css.css%EF%BC%89
• 被导入文件的名字是CSS的url()值。

如果想将原始的css文件，当做sass导入，可以直接修改.css后缀为.scss（sass语法完全兼容css）。

更多编程相关知识，请访问：编程入门！！

위 내용은 Scss의 기본 구문과 SASS 파일을 가져오는 방법에 대한 간략한 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!