scss란? 기본사용방법과 변수 mixin include

scss를 사용해야 하는 이유

 

CSS는 복잡한 언어는 아니지만 작업이 커지고 코드가 많아질수록 불편함이 생기게 된다.

 예를들어 선택자(Selector)의 과용과 연산 기능의 한계, 구문(Statement)의 부재 ..등 프로젝트가 커지면

코드 중복이 많아지고 복잡해지어 유지보수가 어려워지게 된다.

프로그래밍에서 가장 흔한 조건문이나 반복문 조차도 문법을 지원하지 않아 '복사 & 붙여넣기' 만 반복 해야한다.

•선택자(Selector)을 만들때 매번 불필요한 부모 요소 선택자를 적어야 한다.

•function 같은게 없으니, 규모가 큰 프로젝트의 경우 자동화하기 어렵고 모든 것을 수동으로 변경해야 한다.

•결국 중복되는 코드가 많아 코드 줄 수가 길어져 유지보수에 마이너스적인 요소가 된다.

 

 

scss 를 사용하게 되면

선택자의 중첩(Nesting)을 통해 반복되는 부모 요소 사용을 줄일수 있다.

변수(Variable)를 사용해서 CSS속성과 값을 일원화된 관리 가능

프로그래밍 언어에서 사용하는 조건문, 반복문을 사용해서 동적인 CSS 관리 가능

코드 수정, 코드 조각 재사용하기 편리하다.

 

 

하지만 css로 컴파일을 거쳐야하는 번거로움이 있을수 있다.

 

컴파일 - 컴퓨터는 이해하지만 브라우저는 이해하지 못하는 언어를 브라우저가 이해할 수 있도록 변경하는 것

scss구문은 sass언어의 하위 개념이다.

 

scss,sass 차이점

 

Css 를 편리하게 사용할 수 있도록 하며 추가기능 있는 확장판 스크립트 언어이다.

Css 기능 부재 단점을 보완한 다양한 기능 추가

Sass 는 들여쓰기 + 줄바꿈 형식 , 확장자 *.sass

SCSS 는 중괄호+세미콜론 형식      확장자 *.scss

전세계적으로 SCSS를 활용한 라이브러리 & 프레임 워크수, 사용자수가 SASS보다 많음

Sass보다 SCSS가 css와의 호환성이 더 좋음

 

믹스인(mixin-재사용 가능한 기능을 만드는 방식) 문법

SASS -   =로 선언하고 + 로 적용

SCSS - @mixin 으로 선언 @include 로 적용

 

 

 

주석

/*여러줄 주석*/  - css로 변환됨

//한줄 주석 - css로 변환되지 않음(비밀주석으로 사용)

 

변수 ( Variables)

변수를 지정해 놓고 바로 사용이 가능하고, 이렇게 지정해 해두면 프로젝트 내에 정해놓은 컬러를 사용함에

 있어  오차를 줄여주고, 사용하는 개발자 입장에서도 효율적으로 개발이 가능합니다. 

또한 디자인 컨셉 변경 등 컬러 코드 속성을 대대적으로 변경할 때에도, 변수 선언 부분만 수정하면 되니

유지보수성도 뛰어납니다.

 

 

변수명  : $로 시작

$변수명:값;

 

ex)

$영문

$영문+숫자

 

선택자

자식 선택자 >  

후손 선택자 공백

현재 요소에 마우스 올라가면 &:hover

가상선택자 &:nth-child(2)

a에 클래스가 붙으면 

&.classname{}

ex)

 

mixin include

 

mixin - keyframe 만드는 개념

include keyframe 불러오는 개념정도로 생각하면 됨.

 

@mixin 이름{

속성:값;

속성:값;...

}

매개변수

색, 굵기등 바뀔수 있는 요소를 변수화 시킴

@mixin 이름(변수){

속성:값;

속성:값;...

}

@mixin border($color){
border:1px solid $color;
}

p{@include border(red);}

 

변수 여러개 넣기

@mixin border1($width,$color){
border:$width solid $color
}

p{@include border1(1px,red)}