[SASS / SCSS] 기초 1편

이 블로그는 내가 공부한것들을 까먹지 않도록 포스팅하는 용도라

간단한 부분들은 슝하고 지나가겠다😅

 

 

1. SASS의 변수는 $로 정의한다.

2. 중첩 ( 아래 코드로 설명 끝ㅎㅎ.. )

   아래의 코드처럼 작성후 컴파일 하면 nav{} nav ul{} 처럼 css파일이 작성된다.

header { background-color: $header-back; display:block; height:100px;
  nav { 
    ul {
        list-style:none;
        float:right;
        li{
           display: inline-block;
           a {
               display: block;
               padding: 5px 3px;
               margin:10px 20px;
            }
         }   
      } 
   }
 }

3. 부분화 및 불러오기

설명을 보니 내가 느낀바로는 전역변수를 별도의 파일로 분리하는 것 같다.

부분화를 하는 파일명은 반드시 앞부분에 언더바( _ )를 붙여주어야 한다.

언더바가 없을 경우 하나의 css파일로 컴파일 되어 버린다.

불러오기는 @import '파일명'; 으로 불러 와주면 된다. ( css의ㅁ @import url(파일명.css)와 같은 것같다😮 )

 

4. 믹스인

이부분을 보면서 역시 scss는 공부해야해라고 생각이 들었다.

css에서 브라우저별 접두사를 붙이는 경우가 있는데 (transform 처럼)

이를 함수형태로 뚝딱 만들 수 있는 멋진 친구가 믹스인이다.

접두사는 크롬, 사파리 > 파이어폭스 > IE계열 순으로 적는게 좋다는데 이유...가 뭔지 모르겠다

사용되는 순서인가? 아시는분 꼭 알려주세요😭

@mixin border-radius($radius){
    -webkit-border-radius: $radius;
    -mox-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}

.box{
	@include border-radius(10px);
}

 

5. 확장 & 상속

믹스인에 이어 계속해서 scss에 흥미가 생기고 놀랍다!

sass에선 공통적인 부분들을 묶어서 사용할 수 있도록 되어 있었다.

.common{
	color:#333;
}

.a{
	@extend .common;
	border:1px solid #fff;
}

ul{
    background-color:#000;
    li{
    	color:#333;
    }
}

header{
    border-bottom:1px solid #000;
    @extend ul;
}

 

6. 연산자

오늘의 마지막 친구다.

sass은 연산자 ( +, -, *, /, % )사용이 가능하다. ( 반응형으로 제작할때 가변마진이나 가변패딩 설정해주기 편할것같다! )

.container{
    width:600px / 900px * 100%;
}

 

1편은 여기까지다 조금만 익숙해지면 확실히 작업하기 훨씬 편할것 같다는 생각이다.

중복코드를 찾아서 ctrl c v할 일도 없고 메인 색상을 찾아 다닐 필요도 없다.

진작에 찾아서 알았다면 좋았을걸! 😫