수집할만한 CSS 전처리기 scss 사용 요약

이 기사에서는 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

🎜Nesting🎜🎜🎜 – Sass는 하위 항목을 선택하기 위한 코드 중첩을 허용합니다. CSS의 기본 하위 항목 선택기와 비교하면 중첩 스타일 코드가 더 직관적입니다. 🎜rrreee🎜공개 구성 요소 '약물 지침'의 CSS 코드 블록은 마우스 클릭으로 왼쪽 탐색 모음을 선택할 때 제목의 표시 스타일을 설정하는 데 사용됩니다. 🎜🎜중첩 규칙을 사용하여 코드를 중첩한 후: 🎜rrreee🎜 중첩 후속 코드는 전체 선택기 라인이 아니라 js와 유사한 구조에 더 가깝습니다. 코드 간의 다양한 관계를 관찰하는 데 더 도움이 됩니다. 🎜🎜또한 scss는 속성 중첩 및 의사 요소 중첩을 구현하여 더욱 효율적인 코드를 구현할 수도 있습니다.🎜🎜🎜🎜Mixin🎜🎜🎜JavaScript와 같은 프로그래밍 언어에서는 재사용이 필요한 코드 블록을 작성할 수 있습니다. 코드를 한 번 작성하고 여러 번 재사용하는 기능을 완료하는 데 필요한 경우 이 표현식을 하나의 함수로 호출합니다. scss의 Mixin도 유사한 기능을 구현합니다. 그러나 믹스인의 코드 블록은 값을 생성하지 않습니다. 🎜🎜Mixin 코드 블록을 정의하려면 @mixin을 사용해야 하고, 정의된 Mixin 코드 블록을 호출하려면 @include를 사용해야 합니다.🎜🎜아직도 약물 설명 구성요소에 대한 코드 설명🎜rrreee 🎜구성요소에는 동일한 CSS 코드 블록이 있는 두 개의 선택기가 있습니다. 해당 기능은 페이지의 스크롤 막대를 숨기는 것입니다. 바가 표시됩니다. 🎜🎜스크롤 막대를 숨기는 코드는 mixin을 사용하여 별도로 정의한 후 호출할 수 있습니다. 🎜rrreee🎜🎜🎜상속🎜🎜🎜상속은 프로그래밍 언어에서도 코드 양을 줄이기 위한 중요한 기능입니다. scss에서는 상속 기능도 똑같이 중요합니다. 상속은 한 스타일이 다른 스타일과 거의 동일하고 몇 가지 차이점만 있을 때 유용합니다. 🎜🎜코드 부분을 상속해야 하는 경우 @extend를 사용할 수 있습니다. 확장 후의 선택기는 상속된 코드입니다. 🎜🎜(상속으로 구현한 기능과 mixin이 비슷한 것 같네요. @mixin의 코드를 직접 상속하면 구현된 기능도 같을까요?) 🎜🎜 (영상 공유 학습 : 🎜 CSS 비디오 튜토리얼🎜)🎜🎜

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