SASS와 SCSS

CashCash·2020년 12월 22일
Sassscss
0

css

목록 보기
6/10
  • css는 원시적인 문법이기에 고도화된 작업에서는 불편한 경우도 있다.

css preproceccor(전처리기)

  • 전처리기를 컴파일하는 작업이 필요하다
  • 전처리기는 css문법과 굉장히 유사하지만 표준 css보다 많은 기능을 사용해 편리하게 작성이 가능하다.
  • 웹에서는 동작하지 않기 때문에 작성한 전처리기를 웹에서 동작 가능한 표준의 css로 컴파일 한다.
  • 2006년부터 시작된 가장 오래된 css확장 언어다.

SASS와 SCSS의 차이점

  • SCSS는 css구문과 완전히 호환되도록 새로운 구문을 도입해 만든 SASS의 모든 기능을 지원하는 css의 상위집합이다.

  1. SCSS는 {}와 ;를 사용한다.

    sassscss
    .list width:100px.list {width: 100px;}

  2. Mixins(재사용 가능한 기능을 만드는 방식)

    sassscss
    =과 +기호 사용@mixin과 @include로 기능 사용
    SASS는 좀 더 간결하고 작성하기 편리하며 {}나 ;를 사용하지 않아도 되니 코드가 깔끔해진다.SCSS는 인라인코드(한 줄 작성)를 작성할 수 있고, css와 유사한 문법을 가지기 때문에 코드 통합이 훨씬 쉽다.

    (https://www.sassmeister.com/)에서 실시간으로 컴파일 변환이 가능하다.

1. 문법(SCSS)

1. 주석

  • //컴파일되지 않는 주석
  • /* 컴파일 되는 주석 */
  • SASS의 경우 : 여러줄 주석 앞에 * 를 붙여야하고 *의 줄은 맞춰야한다.

ex)

   /* a
    * b
    * c */

2. 데이터 종류

1) 숫자 : 단위가 있거나 없다.
2) 문자 : 따옴표가 있거나 없다.
3) 색상표현 :
4) Booleans
5) Nulls : 속성 값으로 null이 되면 컴파일이 안 된다.
6) Lists : 공백이나 ,로 구분된 값 목록전체(=배열)
ex) apple, orange
- 이 때 괄호는 붙여도 되고 안 붙여도 된다.
7) Maps : Lists와 값이 유사하거나 값이 key: value형태
ex) (apple: a, banana: b)
- 이 때 괄호는 꼭 붙여야 한다!!

3. 중첩

1) 중첩 앞에서 &는 상위 선택자를 참조해 치환한다.

.list{
    &:last-child{
            number: one;
                }
      }
.list:last-child{
    number: one;
}

2) @at-root (중첩 벗어나기)
- 반복되는 변수를 쓰고 중첩문에서 벗아나 독립적으로 사용이 가능하다.

3) 중첩된 속성 : x:로 사용한다

margin: {
   top: 100px;
       left: 100px;
}
{
   margin-top: 100px;
       margin-left: 100px;
}

4. 변수

  • $변수이름 : 속성값

    $color: red;
.box{
    color: $color;
}

    1) 변수 유효 범위
    - 선언된 블록 {} 안에서만 유효하다.
    2) 변수 재할당

    
$red: #ff0000;
$c-p: $red;
.box{
color: $c-p;
}

    3) 전역설정 !global
    - !global 플래그 사용시 변수의 유효범위를 전역으로 설정 가능하다.

    .box1{
	$color: #000 !global;
  	background: $color;
}
.box2{
	background: $color;
}

    4) 초기값 설정 !default
    - 현재 설정한 변수의 값을 사용하지 않겠다는 의미다.
    - Bootstrap 같은 외부 라이브러리를 연결했을때 변수 이름이 같을 경우 변수들이 overwrite 되지 않도록 할 수 있다. ( 실제로 많이 사용중 )

    5) 문자 보간 #{}

    $F: unquote('a');
@import url('http://... = #{$F}');

    는 아래가 된다

    import url('http://... = a');
    • sass의 내장함수 unguote()는 문자에서 따옴표를 제거한다!

5. 가져오기

  1. @import로 가져온 sass파일은 단일 css 출력 파일로 병합된다.
  2. 순수한 css문법으로 가져올 경우는
    1) .css
    2) 파일이름이 http:// 로 시작할때
    3) url()이 붙었을 때
    4) 미디어쿼리가 있는 경우
    • css와 sass는 구분할 수 있어야 한다.
  3. 여러파일 가져오기
    • @import로 여러파일을 가져올 수 있다.
      @import "header" "footer"
  4. 파일분할
    • 각 기능과 부분으로 나눠 유지보수를 쉽게 할 수 있다.
    • 파일 이름 앞에'_'를 붙여 @import로 가져올시 *.css파일로 컴파일하지 않는다. 즉, _style.css파일은 컴파일하지 않는다.

6. 연산

  1. 숫자
  2. 문자
  3. 색상
    • opacify(x, .a) : 더 불투명하게
    • transparentize(x, .a) : 더 투명하게
  4. 논리

7. 재활용(Mixins)

  • 선언 : @Mixin

  • 포함 : @include

    • scss 
    @mixin 이름{
    스타일;
    }

@include 이름

    mixin으로 선언한 것을 include로 꺼내 쓰는 개념이다.

    • sass
    = mixin이름
    스타일

+ mixin이름

    1. 인수
      1) 인수의 기본값 설정

      @mixin mixin이름($매개변수: 기본값){
	스타일;
    }

      2) 키워드 인수

      @mixin mixin이름($매개변수A: 기본값, $매개변수B: 기본값){
	스타일;
    }
@include mixin이름($매개변수B: 인수);

    • 필요하지 않은 변수의 값은 null로 설정할 것

      3) 가변 인수

    • 입력할 인수 갯수가 불확실할 경우 매개변수 뒤에 ...을 붙여준다.

      @mixin alpha($a, $b, $c...){
    width: $a;
    heigth: $b;
    background: $c;
    }
.box {
	@include alpha(1,2,3,4,5);
}

      background: 3,4,5;
    1. @content
    • 해당부분에 원하는 스타일 블록을 전달할 수 있다.
    • 원하는 내용을 더 넣을 숭 ㅣㅆ다.

8. 확장

  • @extend 선택자

    .btn{
    p: 10px;
}

.btn-a{
    @extend .btn;
    b: red;
}

    가 아래처럼 된다.

    .btn, btn-a{
	p: 10px;
}
.btn-a {
	b: red;
}

    • 확장의 부작용

      • 원치 않는 부작용이 초래될 수 있는가?
      • 이 한 번의 확장으로 얼마나 큰 css가 생성되는가?
      • 현재 선택자가 어디에 첨부될 것인가?

      ※부작용이 있을 수 있으니 Mixin기능으로 대체할 것!!!

9. 함수

  • 연산된 값을 @return으로 반환

    @function 함수이름($매개변수){
    @return 값;
}
    • 지시어는 @include 대신 함수이름(인수)로 사용한다.
    • 인수 값이 없더라도 ()는 사용한다.
    @function width($a, $b, $c){
	@return $a * ($b/ $c);
}
.container{
	width: (3,2,1);
}

  • 이름중복

    • 중복될 수 없는 함수 이름을 쓰는 것도 방법이다.
    • red() 같은건 내장함수가 있다.
      ex) extract-red()

10. 내장함수

  • 이미 만들어져 있는 함수
  • []는 선택가능한 인수

<참고 자료>
https://poiemaweb.com/sass-built-in-function
https://m-veloper.github.io/devlog/2020/03/22/sass-15/

11. 조건과 반복

  1. if(함수)

    • true와 false중 하나만 반환한다
    • 조건부 삼항 연산자와 비슷하다
      if(조건, 표현식1, 표현식2)
      div{
    width: if($width>300px, $width, null);
    }
$width: 500px;

  2. @if(지시어)

    • 조건에 따른 분기 처리 가능
      @if(조건1){}
@else if(조건2){}
@else{}
      • ()없이 작성 가능
      • 조건에는 논리연산자 사용 가능
        if(unitless($w), #{$w}px, $w)

  3. @for

    • 스타일을 반복적으로 출력한다
      @for $변수 from 시작 through 종료{}

@for $변수 from 시작 to 종료 {}

from 1 through 3 // 1-3 반복

from 1 to 3 // 1-2 반복

  4. each

    • list와 map 데이터를 반복할 때 사용한다

      @each $변수 in 데이터{}

    • list 반복

      $fruits: apple, mango;
.fruits{
	@each $a in $fruits{
          $index: index($fruits, $a);
          li: nth-child(#{index}){
              left: 50px * $index;
       				 }
   			   }
	}

                ||


.fruits li:nth-child(1){ left: 50px; }
.fruits li:nth-child(2){ left: 100px; }

    • map 반복

      $fruits: {
	apple: K,
        banana: J
};

@each $key, $value in $fruits{
	.box-#{$key}{
    	background: url('#{value}.png');
    }
}
      • index는 map데이터는 처리하지 못한다. 따라서 list데이터로 변환을 해야한다.

  5. @while

    • false로 평가될 때까지 반복한다

    • 그러나 무한루프에 빠질 위험도 있다.

      @while 조건{}
      $i = 6;
@while $i>0{
	.item-#{$i}{
   	width: 2px * $i;
   }
   $i: $i-2;
}

	||

.item-6{width: 12px;}
.item-4{width: 8px;}
.item-2{width: 4px;}
profile
CashCash
studying frontend
이전 포스트

perspective를 통한 3D 연습

다음 포스트

grid 연습

0개의 댓글