SCSS/SASS 개요

SASS - 의미

선결 조건

배후 조종자--거칠고 무례하다

SASS 설정

SASS 기능

변량

$brand-color: #9966ff;

body {
  font: 100% $font-stack;
  color: $brand-color;
}

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

둥지를 틀다

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
        display: inline-block;
    }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS file:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

부분적

You can create partial SASS files that contain little snippets of CSS that you can include in other SASS files. This is a great way to modularize your CSS (just like in JAvaScript) and help keep things easier to maintain. A partial is a SASS file named with a leading underscore. You might name it something like _partial.scss. The underscore lets SASS know that the file is only a partial file and that it should not be generated into a CSS file. SASS partials are used with the @import rule.

SCSS file:

@import "variables";

$brand-color: #9966ff;
$background-color: #f5f5f5;

body {
    color: $brand-color;
    background-color: $background-color;
    * {
        box-sizing: border-box;
        padding: 0;
        margin: 0;
    }
}

Note: We neither added the extension .scss or the underscore. But beware of not having two separate files of the same name: one with underscore and another without underscore. It is a good practice to save all your partials in a separate folder to avoid confusion.

혼혈아

SCSS file:

@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
   
 theme;
}
.alert {
   
 theme($theme: DarkRed);
}
.success {
   
 theme($theme: DarkGreen);
}

CSS file:

.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

SASS의 상속 또는 "Extends" 키워드 SASS의 extends 키워드를 사용하여 클래스나 다른 선택기의 속성을 상속하거나 확장할 수 있습니다. SCSS 파일: . 일반 캐비닛 폭: 98%; 최대 너비: 1440px; } . 아이템 컨테이너 @ 확장.유니버설 컨테이너; 글꼴 크기: 16px; } 위의 코드 세션에서, 우리는 일반적인 용기 클래스에서 몇 가지 스타일을 정의했습니다. extends 키워드를 사용하면, 우리는 문장 용기에서 같은 스타일을 사용할 수 있습니다. 컴파일할 때 위 코드는 다음 CSS 스타일을 생성합니다. 일반 캐비닛아이템 컨테이너 폭: 98%; 최대 너비: 1440px; } . 아이템 컨테이너 글꼴 크기: 16px; } 신기해 보여요.

SASS - 내장 함수

SASS has many built in functions,we will just review a few of them.

루프와 각 루프의 경우:

You can use loops in SASS to write repetitive styles used in your applications like:

CSS file:

.col-1 {
    width: 100%;
}

.col-2 {
    width: 50%;
}

.col-3 {
    width: 33.33%
}

.col-4 {
    width: 25%
}

@for $width from 1 through 4 {
    .col-#{$width} {
        width: (100%/ $width );
    }
}