Vue 스캐폴딩에서 Sass를 구성하는 방법

이 글에서는 주로 vue scaffolding에서 Sass를 구성하는 방법을 소개합니다. 내용이 꽤 좋아서 지금부터 참고용으로 올려보겠습니다.

세계에서 가장 성숙하고 안정적이며 강력한 전문가급 CSS 확장 언어!

CSS 호환
Sass는 모든 버전의 CSS와 완벽하게 호환됩니다. 우리는 귀하가 사용 가능한 CSS 라이브러리를 원활하게 사용할 수 있도록 이를 엄격하게 제어합니다.

풍부한 기능
Sass는 다른 CSS 확장 언어보다 더 많은 기능과 특징을 가지고 있습니다. Sass 핵심 팀은 선두를 유지하기 위해 끊임없이 노력하고 있습니다.

Mature
Sass는 8년 넘게 핵심 팀에 의해 세심하게 제작되었습니다.

업계 인정
업계에서는 계속해서 Sass를 CSS 확장 언어로 선택해 왔습니다.

대규모 커뮤니티
여러 기술 회사와 수백 명의 개발자가 Sass를 지원합니다.

Frameworks
Sass로 구축된 프레임워크는 셀 수 없이 많습니다. Compass, Bourbon, Susy 등이 있습니다.

vue scaffolding에 설치했습니다

1 설치

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

2 구성: 빌드 폴더 아래 webpack.base.conf.js 규칙에 구성을 추가합니다

{
 test: /\.sass$/,
 loaders: ['style', 'css', 'sass']
}
// 不知道为什么我配置完就打包不了, 不配置就是好用的

3 APP.vue에서 스타일 태그 수정

<style lang="scss">

4

(1) 변수 사용

1-1) 변수 사용

sass를 사용하여 사람들에게 혜택을 주는 중요한 기능은 CSS에 변수를 도입한다는 것입니다. 반복적으로 사용되는 CSS 속성값을 변수로 정의한 후, 속성값을 반복적으로 작성할 필요 없이 변수명을 통해 참조할 수 있습니다. 또는 한 번만 사용되는 속성값에 대해서는 사람들이 속성값의 목적을 한눈에 알 수 있도록 이해하기 쉬운 변수명을 부여할 수도 있다.

Sass는 변수를 식별하기 위해 $ 기호를 사용합니다(이전 버전의 sass는 변수를 식별하기 위해!를 사용합니다. $로 변경한 이유는 대부분! 하이라이트 색상이 너무 보기 흉하기 때문입니다.)

1-2) 변수 선언

$back: red
#app
 color: $back
// 变量声明也分为全局变量和局部变量 

// 这样也是好用的

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

//编译后

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

1-3) sass에서 사용되는 변수 명명

-과 _는 실제로 동일합니다. 예를 들어 $link-color와 $link_color는 실제로 동일한 변수를 가리킵니다.

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

//编译后
a {
 color: blue;
}

(2) 중첩된 CSS 규칙

CSS에서 선택기를 반복적으로 작성하는 것은 매우 짜증나는 일입니다. 페이지의 동일한 블록을 가리키는 큰 스타일 목록을 작성하려면 동일한 ID를 반복해서 작성해야 하는 경우가 많습니다.

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

이 경우 sass를 사용하면 이를 작성할 수 있습니다. 한 번만 스타일을 읽기 쉽게 만드세요. 성별이 더 높습니다. Sass에서는 러시아 인형처럼 규칙 블록 내에 규칙 블록을 중첩할 수 있습니다. Sass는 반복적인 작성을 피하기 위해 CSS를 출력할 때 이러한 중첩된 규칙을 처리하는 데 도움을 줍니다.

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

 /* 编译后 */
#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

(2-1) 부모 선택자의 식별자 &;

자손 선택자와 의사 클래스를 사용할 때 더 번거로울 수 있습니다. 이때 & 유용합니다

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

// 编译后

// 其实&相当于是父级
article a { color: blue }
article a:hover { color: red }

(2-2) 그룹 선택자의 중첩;

그룹을 다룰 때는 그냥 사용하고, 나누기만 하면 완벽하게 파싱됩니다. 필요 없음 귀찮게

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

<!--编译后-->

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

동일합니다

nav, aside {
 a {color: blue}
}
//编译后
nav a, aside a {color: blue}

(2-3) 하위 조합 선택기와 동급 조합 선택기: >, + 및 ~;

위의 세 가지 조합 선택기는 다음과 같아야 합니다. 브라우저가 특정 컨텍스트 내의 요소만 선택하도록 지정하기 위해 다른 선택기와 함께 사용됩니다.

article {
 // 同层全体组合选择器
 ~ article { border-top: 1px dashed #ccc }
 // 直接子元素
 > section { background: #eee }
 dl > {
 dt { color: #333 }
 dd { color: #555 }
 }
 // 同层相邻组合选择器
 nav + & { margin-top: 0 }
}

(2-4) 중첩된 속성;

Sass에서는 CSS 선택자 외에도 속성도 중첩될 수 있습니다. 속성 작성과 관련된 중복이 선택기 작성만큼 나쁘지는 않지만 border-styleborder-widthborder-color 및 border-*를 반복해서 작성해야 하는 것도 매우 짜증나는 일입니다. 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;
}

3 SASS 파일 가져오기

css에는 특히 흔하지 않은 기능이 있습니다. 이는 다른 CSS 파일을 하나의 CSS 파일로 가져올 수 있도록 허용하는 @import 규칙입니다. 그러나 결과적으로 @import가 실행될 때만 브라우저가 다른 CSS 파일을 다운로드하므로 페이지 로드 속도가 매우 느려집니다.

Sass에도 @import 규칙이 있는데 차이점은 sass의 @import 규칙은 CSS 파일 생성 시 관련 파일을 가져오는 것입니다. 즉, 추가 다운로드 요청을 시작할 필요 없이 모든 관련 스타일이 동일한 CSS 파일로 결합됩니다.

4 기본 변수 값

일반적으로 변수를 반복해서 선언하면 마지막 선언만 유효하며 이전 값을 덮어쓰게 됩니다. 예:

$link-color: blue;
$link-color: red;
a {
color: $link-color; // red
}

그러나 이런 일이 발생하지 않도록 하려면 sass의 !default 태그를 사용하여 이 목적을 달성할 수 있습니다. CSS 속성의 !important 태그와 매우 유사합니다. 차이점은 !default가 변수에 사용된다는 것입니다. 의미는 변수가 선언되고 값이 할당되면 선언된 값을 사용하고, 그렇지 않으면 다음을 사용한다는 것입니다. 기본값.

댓글 5개

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

6 믹서

如果你的整个网站中有几处小小的样式类似（例如一致的颜色和字体），那么使用变量来统一处理这种情况是非常不错的选择。但是当你的样式变得越来越复杂，你需要大段大段的重用样式的代码，独立的变量就没办法应付这种情况了。你可以通过sass的混合器实现大段样式的重用。

混合器使用@mixin标识符定义。看上去很像其他的CSS @标识符，比如说@media或者@font-face。这个标识符给一大段样式赋予一个名字，这样你就可以轻易地通过引用这个名字重用这段样式。下边的这段sass代码，定义了一个非常简单的混合器，目的是添加跨浏览器的圆角边框。

@mixin rounded-corners {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

然后就可以在你的样式表中通过@include来使用这个混合器，放在你希望的任何地方。@include调用会把混合器中的所有样式提取出来放在@include被调用的地方。如果像下边这样写：

notice {
 background-color: green;
 border: 2px solid #00aa00;
 @include rounded-corners;
}

//sass最终生成：
// 编译后
.notice {
 background-color: green;
 border: 2px solid #00aa00;
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

混合器太好用了，一不小心你可能会过度使用。大量的重用可能会导致生成的样式表过大，导致加载缓慢。所以，首先我们将讨论混合器的使用场景，避免滥用。

(6-1)给混合器传参;

混合器并不一定总得生成相同的样式。可以通过在@include混合器时给混合器传参，来定制混合器生成的精确样式。当@include混合器时，参数其实就是可以赋值给css属性值的变量。如果你写过JavaScript，这种方式跟JavaScript的function很像：

@mixin link-colors($normal, $hover, $visited) {
 color: $normal;
 &:hover { color: $hover; }
 &:visited { color: $visited; }
}

当混合器被@include时，你可以把它当作一个css函数来传参。如果你像下边这样写：

a {
 @include link-colors(blue, red, green);
}

//Sass最终生成的是：
a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

其实@mixin 的方法还有很多 可以官网查看

7 使用选择器继承来精简CSS;

使用sass的时候，最后一个减少重复的主要特性就是选择器继承。基于Nicole Sullivan面向对象的css的理念，选择器继承是说一个选择器可以继承为另一个选择器定义的所有样式。这个通过@extend语法实现，如下代码:

//通过选择器继承继承样式
.error {
 border: 1px solid red;
 background-color: #fdd;
}
.seriousError {
 @extend .error;
 border-width: 3px;
}

.seriousError不仅会继承.error自身的所有样式，任何跟.error有关的组合选择器样式也会被.seriousError以组合选择器的形式继承，如下代码:

//.seriousError从.error继承样式
.error a{ //应用到.seriousError a
 color: red;
 font-weight: 100;
}
h1.error { //应用到hl.seriousError
 font-size: 1.2rem;
}

关于@extend有两个要点你应该知道。

跟混合器相比，继承生成的css代码相对更少。因为继承仅仅是重复选择器，而不会重复属性，所以使用继承往往比混合器生成的css体积更小。如果你非常关心你站点的速度，请牢记这一点。
继承遵从css层叠的规则。当两个不同的css规则应用到同一个html元素上时，并且这两个不同的css规则对同一属性的修饰存在不同的值，css层叠规则会决定应用哪个样式。相当直观：通常权重更高的选择器胜出，如果权重相同，定义在后边的规则胜出。

混合器本身不会引起css层叠的问题，因为混合器把样式直接放到了css规则中，而继承存在样式层叠的问题。被继承的样式会保持原有定义位置和选择器权重不变。通常来说这并不会引起什么问题，但是知道这点总没有坏处。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

如何用vue快速开发app的脚手架工具

关于vue如何引入sass全局变量的解析

위 내용은 Vue 스캐폴딩에서 Sass를 구성하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!