이 기사에서는 CSS 프로세서 scss에 대한 관련 지식을 제공합니다. CSS 전처리기는 특수 프로그래밍 언어를 사용하여 CSS에 일부 프로그래밍 기능을 추가하고 CSS를 대상으로 사용하여 파일을 생성한 다음 개발자가 코딩 작업에 이 언어를 사용합니다. 그것이 모두에게 도움이 되기를 바랍니다.

1. CSS 전처리기가 나타나는 이유는 무엇입니까?

– CSS는 프로그래밍 언어가 아니며 웹 사이트 스타일을 작성하는 데에만 사용할 수 있었습니다. 필수 스타일이 자주 등장하는 경우가 많았습니다. 또한 매우 간단합니다. 그러나 사용자 요구가 증가하고 웹 사이트 기술이 업그레이드됨에 따라 CSS의 정적 작성 방법은 점차 더 이상 프로젝트에 만족하지 않습니다. js와 같은 프로그래밍 언어의 모든 변수, 상수 및 기타 프로그래밍 구문이 없으면 CSS 코드는 필연적으로 비대해지고 유지 관리가 어려워집니다. 그러나 CSS를 대체할 수 있는 것은 없으므로 CSS 전처리기는 프런트엔드 기술에서 CSS의 확장으로 나타납니다.

2. 일반적인 CSS 전처리기

– 지금까지 CSS 전처리기 기술은 상당히 성숙해졌으며 다양한 CSS 전처리기 언어가 등장했습니다. 현재 주류에는 Sass(Scss), Less, Stylus라는 세 가지가 있습니다.

3. CSS 전처리기의 편리함

– Sass를 예로 들어보세요

– Sass의 주요 기능은 변수 정의 허용, CSS 코드 중첩 허용, 함수 함수, Mixin, 상속 등입니다. 이러한 기능을 사용하면 프로그래밍 언어 습관에 맞게 CSS를 더욱 일관되게 작성하고 CSS 코드를 더욱 재사용 가능하게 만들고 코드 기능을 더욱 직관적으로 만들고 프로그래머가 읽고 유지 관리하기 쉽게 만듭니다.

4. Sass 전처리기

Variables

Sass를 사용하면 코드 재사용을 위한 변수를 정의할 수 있습니다. 변수 정의에는 $를 사용하세요. 동일한 속성을 사용하는 코드 블록이 있는 경우 재사용된 속성을 변수에 저장하도록 변수를 정의할 수 있습니다. 특정 속성값을 균일하게 수정해야 하는 경우 수정해야 할 속성을 코드에서 하나씩 찾을 필요 없이 변수를 직접 수정할 수 있습니다. $ 进行变量定义。在有使用相同属性的代码块时，可以通过定义一个变量，将复用的属性储存到变量中。当需要统一修改某个属性值时，就无须在代码中挨个去找需要修改的属性，而是直接修改变量即可。

在公共组件药品说明书中，对组件的边框样式进行了单独设置。此样式也用于组件内部各部分分隔的边框。因此可以将样式存储到一个变量当中进行复用。

/deep/ .borderLayout.showBorder{
border: 1px solid #EBEEF5
}
/deep/.borderLayout > p.showBorder.left {
border-right: 1px solid #EBEEF5;
}

通过scss的嵌套规则可以修改为：

$border: 1px solid #EBEEF5
/deep/ .borderLayout.showBorder{
border: $border
}
/deep/.borderLayout > p.showBorder.left {
border-right: $border;
}

嵌套

–Sass允许代码嵌套，用于选择后代。相对于css原生的后代选择器，嵌套样式的代码，更加直观。

/deep/ .ant-anchor-link-active>.ant-anchor-link-title{
color:#303133
}

公共组件‘药品说明书’ 的css代码块，用于设置左侧导航栏被鼠标点击选中时，title的显示样式,

使用嵌套规则将代码进行嵌套之后：

/deep/ .ant-anchor-link-active{
 .ant-anchor-link-title{
   color:#303133
 }
}

嵌套之后的代码，更接近js一样的结构，而不再是一整行的选择器。更有利于观察出代码间的各种关系。

此外，scss的也可以实现属性嵌套以及伪元素嵌套，从而实现更加精简的代码

Mixin

在JavaScript等编程语言中，允许将需要复用的代码块编写成一个函数，在有需要的地方就调用这个表达式从而完成代码编写一次就可以完成多次复用的功能。scss的Mixin实现的也是类似的功能。但是Mixin的代码块不产生一个值。

定义Mixin代码块需要使用 @mixin ,调用一个已定义的Mixin代码块使用@include

依旧是以药品说明书这个组件的代码说明

/deep/ .borderLayout > p > .layoutCon {
   overflow: hidden;
   &:hover{ // 此处即为伪元素嵌套
       overflow: auto;
   }
}
.m-nav-bar{
   display: flex;
   flex-direction: column;
   overflow: auto;
   height:100%;
   overflow: hidden;
   &:hover{
       overflow: auto;
   }
}

组件中有两个选择器都出现了同一段css代码块，其作用是隐藏页面中的滚动条，当鼠标hover到所属区域时，滚动条显示。

隐藏滚动条的代码可以使用mixin单独定义出来，然后再调用。

@mixin hide-scroll{
 overflow: hidden;
   &:hover{
       overflow: auto;
   }
}

/deep/ .borderLayout > p > .layoutCon {
  @include hide-scroll;
}

.m-nav-bar{
		@include hide-scroll;
   display: flex;
   flex-direction: column;
   overflow: auto;
   height:100%;
}

继承

继承也是编程语言中，减少代码量的重要功能，在scss中，继承功能同样重要。如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用继承就显得很有用。

当需要继承一段代码时，可以使用@extend，extend之后的选择器就是被继承代码。

（看起来，继承和mixin实现的功能似乎是类似的。如果将@mixin

rrreeescss를 통한 중첩 규칙은 다음과 같이 수정될 수 있습니다: rrreee

위 내용은 수집할만한 CSS 전처리기 scss 사용 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!