Sass,SCSS

TigerStoneV·2022년 3월 31일
Sassscss
0
post-thumbnail
post-custom-banner

🧢 SCSS,Sass란 ?

  • CSS를 효율적으로 작성할 수 있도록 도와주는 프로그램이다.

🧢 SCSS,Sass를 배워야하는 이유

  • css의 한계가 있다.
  • css는 배우기 좋고 쉬운 접근성으로 인하여 인기가 많은 것도 사실이다.
  • 하지만 작업이 고도화 될수록 불편함 또한 같이 커진다.

🧢 Css preprocessor

  • html,css를 써본 사람이라면 들어본 Sass,Less등이 Css 전(예비)처리기다.
  • 보통 CssPreprocessor 라고 부른다.
  • Css 가 동작하기 전에 사용하는 기능으로 ,웹에서는 분명 css가 작동하지만 우리는 css의 불편함을 이런 확장 기능으로 상쇄할 수 있다.
  • [+] 사스는 기초언어에 힘과 우하함을 더해주는 css 확장이다.

🧢 근데 왜 Sass인가 ?

  • 방금 전 설명했다 싶이 Less도있고 stylus도 있고 그런데 도대체 왜 ??
  • less의 아쉬운점: Less에서 제공하는 기능의 한계로 막히는 경우가 몇번 있었는데 그 기능은 stylus나 sass에는 있었다. 하지만 진입장벽이 낮아 많이 사용된다.
  • stylus의 아쉬운점: 덜 유명하고 그만큼 자료가 조금은 부족하며 비교적 늦게 나왔기 때문에 성숙도가 떨어져서 컴파일 후 사소한 버그가 몇몇 보인다.

  • 답은 ?

Sass

  • Sass(SCSS)는 언급한 두 가지 전처리기의 장점을 모두 가진다.
  • 문법은 Sass가 Stylus와 비슷하고, SCSS는 Less와 비슷하며, Sass와 SCSS는 하나의 컴파일러로 모두 컴파일 가능하다.
  • 그리고가장 오래된 CSS 확장 언어이며 그만큼 높은 성숙도와 많은 커뮤니티를 가지고 있고 기능도 훌륭하다.

🧢 Sass vs SCSS (차이점)

  • Sass(Syntactically Awesome Style Sheets)의 3버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위집합(Superset) 이다.
  • 즉, SCSS는 CSS와 거의 같은 문법으로 Sass 기능을 지원한다는 말이다.
  • 더 쉽고 간단한 차이는 {}(중괄호)와 ;(세미콜론)의 유무!
  • 밑에는 예시이다.
// Sass
.list
  width: 100px
  float: left
  li
    color: red
    background: url("./image.jpg")
    &:last-child
      margin-right: -10px
//SCSS
.list {
  width: 100px;
  float: left;
  li {
    color: red;
    background: url("./image.jpg");
    &:last-child {
      margin-right: -10px;
    }
  }
}

  • 단순한 몇 가지를 제외하면 거의 차이가 없지만 복잡한 문장이 될 경우 여러 환경에 따른 장단점이 있을 수 있다.

  • Sass는 좀 더 간결하고 작성하기 편리하며, {}나 ;를 사용하지 않아도 되니 코드가 훨씬 깔끔해진다.

  • SCSS는 인라인 코드(한 줄 작성)를 작성할 수 있고, CSS와 유사한 문법을 가지기 때문에 코드 통합이 훨씬 쉽다.

  • 이렇게 몇몇 장단점이 있기 때문에 회사나 팀에서 원하는 방식을 사용해야 하거나, 개인 취향에 따라서 선택할 수 있다.

  • 단지 상황에 맞는, 원하는 방식으로 골라서 사용하면 되는거 같다.

  • 그래서 추천은?

  • 보통의 경우 SCSS를 추천한다.

🧢 컴파일 방법

  • Sass(SCSS)는 웹에서 직접 동작할 수 없다.
  • 어디까지나 최종에는 표준 CSS로 동작해야 하며, 우리는 전처리기로 작성 후 CSS로 컴파일해야 한다.
  • 다양한 방법으로 컴파일이 가능하지만 자바스크립트 개발 환경(Node.js)에서 추천하는 몇가지 방법
    0 . SassMeister (간단한 작업)
    1 . node-sass
    2 . Webpack (설정 조금 복잡)
    3 . Parcel (간단하게 사용가능)
    4 . Gulp

🧢 주석

  • css 주석 /*..*/ dlek
  • Sass(SCSS)는 js처럼 두 가지 스타일의 주석을 사용한다.
/*Sass */
/* 컴파일되는
 * 여러 줄
 * 주석 */

// Error
/* 컴파일되는
* 여러 줄
    * 주석 */
  • SCSS 는 기존 CSS와 호환이 쉽다.

🧢 데이터 종류

  • Numbers : 숫자 (1, .82 , 19px ...)
  • Strings : 문자 (bold,relative,"/image/" ...)
  • Colors : 색상 (red, blue , #fff ,rgba(0,0,0,.5) ...)
  • Booleans : 논리 (true, false)
  • Nulls : null (아무것도 없음)
  • Lists : 공백이나 , 로 구분된 값의 목록{JS에 Array 같은 느낌}(apple,orange,banana),(1,2,3) ...
  • Maps : List와 유사하나 키 밸류로 이루어진 값들{JS에 Object같은 느낌}(a: apple, b:banana, c: cherry)..

💪 특이사항

Sass에서 사용하는 데이터 종류들의 몇 가지 특이사항

  • Numbers: 숫자에 단위가 있거나 없다.
  • Strings: 문자에 따옴표가 있거나 없다.
  • Nulls: 속성값으로 null이 사용되면 컴파일하지 않는다.
  • Lists: ()를 붙이거나 붙이지 않는다.
  • Maps: ()를 꼭 붙여야 한다.

🧢 중첩(Nesting)

  • Sass는 중첩 기능을 사용할 수 있다.
  • 상위 선택자의 반복을 피하고 좀 더 편리하게 복잡한 구조를 작성할 수 있다.
.section {
  width: 100%;
  .list {
    padding: 20px;
    li {
      float: left;
    }
  }
}

🧢 Ampersand (상위 선택자 참조)

  • 중첩 안에서 & 키워드는 상위 선택자를 참조하여 치환한다.
.btn {
  position: absolute;
  &.active {
    color: red;
  }
}

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}
  • compiled 
.btn {
  position: absolute;
}
.btn.active {
  color: red;
}
.list li:last-child {
  margin-right: 0;
}
  • & 키워드가 참조한 상위 선택자로 치환되는 것이기 때문에 다음과 같이 응용할 수 있다.
.fs {
  &-small { font-size: 12px; }
  &-medium { font-size: 14px; }
  &-large { font-size: 16px; }
}
  • compiled
.fs-small {
  font-size: 12px;
}
.fs-medium {
  font-size: 14px;
}
.fs-large {
  font-size: 16px;
}

🧢 중첩된 속성

  • font-, margin- 등과 같이 동일한 네임 스페이스를 가지는 속성들을 다음과 같이 사용할 수 있다.
.box {
  font: {
    weight: bold;
    size: 10px;
    family: sans-serif;
  };
  margin: {
    top: 10px;
    left: 20px;
  };
  padding: {
    bottom: 40px;
    right: 30px;
  };
}
  • compiled
.box {
  font-weight: bold;
  font-size: 10px;
  font-family: sans-serif;
  margin-top: 10px;
  margin-left: 20px;
  padding-bottom: 40px;
  padding-right: 30px;
}

🧢 변수(Variables)

  • 반복적으로 사용되는 값을 변수로 지정할 수 있다
  • 변수 이름 앞에는 $를 붙인다.
  • $변수이름 : 속성값;
$color-primary: #e96900;
$url-images: "/assets/images/";
$w: 200px;

.box {
  width: $w;
  margin-left: $w;
  background: $color-primary url($url-images + "bg.jpg");
}
  • compiled
.box {
  width: 200px;
  margin-left: 200px;
  background: #e96900 url("/assets/images/bg.jpg");
}

🧢 변수 유효범위(Variable Scope)

  • 변수는 사용 가능한 유효 범위가 지정되어있다.
  • 선언된 블록() 내에서만 유효범위를 가진다.
.box1 {
  $color: #111;
  background: $color;
}
// Error
.box2 {
  background: $color;
}
  • 변수 $color 는 .box1의 블록 안에서 설정되었기 때문에 블록 밖의 .box2에서는 사용이 불가하다.

🧢 변수 재할당

  • 재할당 가능
$red: #FF0000;
$blue: #0000FF;

$color-primary: $blue;
$color-danger: $red;

.box {
  color: $color-primary;
  background: $color-danger;
}
  • compiled
.box {
  color: #0000FF;
  background: #FF0000;
}

  • 💪 !global

  • !global 플래그를 사용하면 변수의 유효범위를 전역으로 설정할 수 있다.
.box1 {
  $color: #111 !global;
  background: $color;
}
.box2 {
  background: $color;
}
  • 대신 기존에 사용하던 같은 이름의 변수가 있을 경우 값이 덮어져 사용될 수 있다.

  • !default

  • !default 플래그는 할당되지 않은 변수의 초깃값을 설정한다.
  • 할당되어있는 변수가 있다면 변수가 기존 할당 값을 사용한다.
$color-primary: red;

.box {
  $color-primary: blue !default;
  background: $color-primary;
}
  • compiled
.box {
  background: red;
}

🧢 #{} 문자보간

  • #{} 을 이용하여 코드에 어디서든 변수값을 넣을 수 있다.
 $color: royalblue;
 .box {
	  color: red;
      background-color: #{$color}
	}
  • compiled
.box {
	color: red
    background-color:royalblue;
}

🧢 가져오기(Import)

  • @import로 외부에서 가져온 Sass 파일은 모두 단일 CSS 출력 파일로 병합된다.

  • 가져온 파일에 정의된 모든 변수 또는 Mixins 등을 주 파일에서 사용할 수 있다.

  • Sass @import는 기본적으로 Sass 파일을 가져오는데, CSS @import 규칙으로 컴파일되는 몇 가지 상황이 있다.

    1. 파일 확장자가 .css일 때
    1. 파일 이름이 http://로 시작하는 경우
    1. url()이 붙었을 경우
    1. 미디어쿼리가 있는 경우

  • 위의 경우 CSS @import 규칙대로 컴파일 됩니다.

@import "hello.css";
@import "http://hello.com/hello";
@import url(hello);
@import "hello" screen;

🧢 여러 파일 가져오기

  • 하나의 @import로 여러 파일을 가져올 수도 있다.
  • 파일 이름은 , 로 구분한다.
@import "header", "footer";

🧢 연산(Operations)

  • (+) 덧셈
  • (-) 뺄셈
  • (*) 곱셈 = 하나 이상의 값이 반드시 숫자(Number)
  • (/) 몫 = 오른쪽 값이 반드시 숫자(Number)
  • (%) 나머지

나누기 주의사항

  • CSS는 속성 값의 숫자를 분리하는 방법으로 /를 허용하기 때문에 /가 나누기 연산으로 사용되지 않을 수 있다.
  • 예를 들어, font: 16px / 22px serif; 같은 경우 font-size: 16px와 line-height: 22px의 속성값 분리를 위해서 /를 사용한다.
  • 아래 예제를 보면 나누기 연산자만 연산 되지 않고 그대로 컴파일된다.
div {
  width: 20px + 20px;  // 더하기
  height: 40px - 10px;  // 빼기
  font-size: 10px * 2;  // 곱하기
  margin: 30px / 2;  // 나누기
}
  • compiled
div {
  width: 40px;  /* OK */
  height: 30px;  /* OK */
  font-size: 20px;  /* OK */
  margin: 30px / 2;  /* ?? */
}
  • 따라서 / 를 나누기로 사용하려면 조건이 충족해야한다
    1. 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우
    1. 값이 ()로 묶여있는 경우
  • 3.값이 다른 산술 표현식의 일부로 사용되는 경우

🧢 재활용 mixins

  • Mixins을 통해 스타일 시트 전체에서 재사용 할 css 선언 그룹을 정의하는 좋은 기능이다.
  • @mixin(선언) , @include(포함하기) : 만들어서 사용
@mixin large-text {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}
h1 {
  @include large-text;
}
div {
  @include large-text;
}
  • compiled
h1 {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}
div {
  font-size: 22px;
  font-weight: bold;
  font-family: sans-serif;
  color: orange;
}

  • 💪 인수

  • @mixin name($매개변수) 사용가능
  • @include name($매개변수) 
@mixin dash-line($width, $color) {
  border: $width dashed $color;
}

.box1 { @include dash-line(1px, red); }
.box2 { @include dash-line(4px, blue); }
  • compiled
.box1 {
  border: 1px dashed red;
}
.box2 {
  border: 4px dashed blue;
}

  • 💪 기본값 설정

  • 인수(argument)는 기본값(default value)을 가질 수 있다
  • @include 포함 단계에서 별도의 인수가 전달되지 않으면 기본값 사용
@mixin dash-line($width: 1px, $color: black) {
  border: $width dashed $color;
}

.box1 { @include dash-line; }
.box2 { @include dash-line(4px); }
  • compiled
.box1 {
  border: 1px dashed black;
}
.box2 {
  border: 4px dashed black;
}

🧢 @content

  • 선언된 Mixin에 @content가 포함되어 있으면 해당부분에 원하는 스타일블록을 전달할 수 있다.
  • mixin에 추가내용 저장가능.
@mixin icon($url) {
  &::after {
    content: $url;
    @content;
  }
}
.icon1 {
  // icon Mixin의 기존 기능만 사용
  @include icon("/images/icon.png");
}
.icon2 {
  // icon Mixin에 스타일 블록을 추가하여 사용
  @include icon("/images/icon.png") {
    position: absolute;
  };
}
  • compiled
.icon1::after {
  content: "/images/icon.png";
}
.icon2::after {
  content: "/images/icon.png";
  position: absolute;
}

🧢 함수 function

  • 자신의 함수를 정의해서 사용가능.
  • 함수와 mixin은 거의 유사하지만 반환되는 내용이 다름.
  • mixin은 위에서 본 내용대로 스타일을 반환하는 반면, 함수는 보통 연산된 특정 값을 @return 지시어를 통해 반환
$max-width: 980px;

@function columns($number: 1, $columns: 12) {
  @return $max-width * ($number / $columns)
}

.box_group {
  width: $max-width;

  .box1 {
    width: columns();  // 1
  }
  .box2 {
    width: columns(8);
  }
  .box3 {
    width: columns(3);
  }
}
  • compiled
.box_group {
  /* 총 너비 */
  width: 980px;
}
.box_group .box1 {
  /* 총 너비의 약 8.3% */
  width: 81.66667px;
}
.box_group .box2 {
  /* 총 너비의 약 66.7% */
  width: 653.33333px;
}
.box_group .box3 {
  /* 총 너비의 25% */
  width: 245px;
}
  • 함수는 @include 같은 별도의 지시어 없이 사용하기 때문에 내가 지정한 함수와 내장함수의 이름이 충돌할 수 있다.
  • 따라서 내가 지정한 함수에는 별도의 접두어를 붙이는 것이 좋다.

🧢 if

  • 조건의 값(true, false)에 따라 두 개의 표현식 중 하나만 반환 한다.
  • 조건의 값이 true이면 표현식1을,
    조건의 값이 false이면 표현식2를 실행한다.
  • if(조건, 표현식1, 표현식2)
$width: 555px;
div {
  width: if($width > 300px, $width, null);
}
  • compiled
div {
  width: 555px;
}

💪 @if

  • @if 지시어는 조건에 따른 분기 처리가 가능하며, if 문(if statements)과 유사하다.
  • 같이 사용할 수 있는 지시어는 @else, if가 있다.
  • 추가 지시어를 사용하면 좀 더 복잡한 조건문을 작성할 수 있다.
$color: orange;
div {
  @if $color == strawberry {
    color: #FE2E2E;
  } @else if $color == orange {
    color: #FE9A2E;
  } @else if $color == banana {
    color: #FFFF00;
  } @else {
    color: #2A1B0A;
  }
}
  • compiled
div {
  color: #FE9A2E;
}
  • 논리 연산자또한 사용 가능
@function limitSize($size) {
  @if $size >= 0 and $size <= 200px {
    @return 200px;
  } @else {
    @return 800px;
  }
}

div {
  width: limitSize(180px);
  height: limitSize(340px);
}
  • compiled
div {
  width: 200px;
  height: 800px;
}

🧢 for

  • @for는 스타일을 반복적으로 출력한다.

  • for 문과 유사하다.

  • @for는 through를 사용하는 형식과 to를 사용하는 형식으로 나뉜다.

  • 두 형식은 종료 조건이 해석되는 방식이 다르다.

// 1부터 3번 반복
@for $i from 1 through 3 {
  .through:nth-child(#{$i}) {
    width : 20px * $i
  }
}

// 1부터 3 직전까지만 반복(2번 반복)
@for $i from 1 to 3 {
  .to:nth-child(#{$i}) {
    width : 20px * $i
  }
}
  • compiled
.through:nth-child(1) { width: 20px; }
.through:nth-child(2) { width: 40px; }
.through:nth-child(3) { width: 60px; }

.to:nth-child(1) { width: 20px; }
.to:nth-child(2) { width: 40px; }
  • to는 주어진 값 직전까지만 반복해야할 경우 유용할 수 있다.
  • 그러나 :nth-child()에서 특히 유용하게 사용되는 @for는 일반적으로 through를 사용하길 권장한다.

🧢 이것으로 SCSS의 정리를 마친다.

profile
TigerStoneV
개발 삽질하는 돌호랑이
이전 포스트

Lodash Method

다음 포스트

Media Query

post-custom-banner

0개의 댓글