접두사

전처리기를 사용하면 변수, 함수, 다른 파일에 파일을 포함하는 기능과 같은 고급 기능을 제공하는 대체 언어로 CSS를 작성할 수 있습니다. 최대한 반복을 피하면서. 일반적으로 빌드 시 브라우저 호환성을 추가하기 위해 기본 제공 접두어가 있습니다. 그리고 CSS 개발을 좀 더 쉽게 해주는 플러그인이 있습니다. 웹 브라우저만 이해할 수 있는 기본 CSS로 다시 변환되도록 컴파일됩니다. 따라서 전처리기는 CSS에 새로운 기능을 제공하지 않고 작성을 용이하게 합니다.

SASS 은 오늘날 가장 널리 퍼져 있고(부트스트랩 4에서 사용됨) 자세히 설명하겠습니다. Sass/SCSS가 있습니다. 첫 번째는 CSS에서 더 멀리 떨어져 있고 두 번째는 CSS와 더 유사하므로 지금은 SCSS에 대해 알아보겠습니다.

SCSS 파일을 브라우저가 해석할 수 있는 CSS로 변환하려면 작은 컴파일러를 설치해야 합니다.
SASSMeister SCSS를 온라인에서 CSS로 직접 컴파일합니다.

중첩

basic nesting examples

.maListe {
            background-color:red;
            &:hover {
                background-color:blue;
                > li {
                    color:purple;
                }
            }
            > li {
                color:green;
                &:hover {
                    color:yellow;
                }
            }
        }

미디어 쿼리를 중첩할 수도 있습니다.

.sidebar{
    width: 300px: 
    @media screen and (orientation: landscpae) {
    width: 500px; 
    }
}

변수

    $couleur-first: #fffff;
    $couleur-second: #00000;

    .page {
        color: $couleur-first;
        background-color : $couleur-second; 
    }

변수는 CSS3 이후 CSS에도 기본적으로 존재합니다.

SCSS 특정 기능

일부는 색상에 전념합니다. 다른 색상에서 파생된 색상을 계산할 수 있습니다.

lighten($color, $amount)/darken($color, $amount)을 사용하면 지정된 백분율을 기반으로 더 밝은/어두운 색상을 계산할 수 있습니다.

포화 상태에서 재생하기 위한 saturate()/desaturate(),

보색 또는 역색을 얻기 위한 보수()/역()

controlling color with functions
other functions

SCSS를 사용하면 CSS 코드를 반환하는 믹스인과 혼동하지 않고 결과를 반환하는 함수를 정의할 수 있습니다.

grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
 @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); } //240px

믹신

mixin을 사용하면 사이트 전체에서 재사용하려는 CSS 선언 그룹을 만들 수 있습니다. 믹스인을 보다 유연하게 만들기 위해 매개변수를 전달할 수도 있습니다.

예를 들어 상자의 그림자 + ​​텍스트의 절반 크기와 더 밝은 색상

    @mixin myShadows ($x, $y, $blur, $color) {
        text-shadow : $x $y $blur $color;
        box-shadow : $x/2 $y/2 $blur/2 lighten($color, 50);    
    } 

    .myText {
        @include myShadows(6px 6x 4px #ff0000);
    }

가져오기

scss 파일을 다른 파일로 가져올 수 있습니다. 이렇게 하면 이러한 파일을 더 쉽게 분할할 수 있습니다. (또한: 아래의 칭찬 덕분에 @import를 @use로 변경했습니다(고마워요!))

//base.scss
body {
...
}

index.scss
@use 'base'; 
nav{
...
}

연장하다

확장을 사용하면 다른 블록의 CSS 코드를 반복하고 속성을 추가하여 재작성을 방지할 수 있습니다.

.myButton{
  padding: 5px; 
  color: white; 
}

.myButton-sucess{
  @extend .myButton; 
  background-color: green; 
}

.myButton-error{
  @extend .myButton; 
  background-color: red; 
}

정황

@if <condition> {
    property to be applied if condition returns true
} @else if <condition> {
    property to be applied if condition returns true
} @else {
    property to be applied if previous conditions returns false
}

예를 들어

$myMainColor : blue; 

p{
  @if $myMainColor == blue {
    color: orange, 
 } @else if $myMainColor == green {
    color: red; 
 } @else $myMainColor == yellow {
   color: purple
 }
}

다음과 같이 루프를 사용하여 변수를 반복할 수도 있습니다.

@을 위한
@각
@동안

@for $i from 1 through 3 {
 .item-#{$i} { width: 2em * $i; }
}


@each $color in blue, white, red
.flag {
 .div-#{$color} {
display: inline-block;
width: 10px;
height: 50px;
   background-color: $color;
 }
}

$i: 3;
@while $i > 0 {
 .item-#{$i} { width: 2em * $i; }
 $i: $i - 1;
}

Workshop