21.08.23 노트정리
Sass
SASS란?
CSS 전처리기
CSS를 확장하는 스크립팅 언어로써, 컴파일러를 통해 브라우저에서 사용할 수 있는 일반 CSS문법형태로 변환
변수(Variable)
- 변수로 사용가능한 형태는 숫자, 문자열, 폰트, 색상,
null,lists와maps가 있음 - 변수를 사용할 때는
$문자를 사용함
Sass
$primary-color: #333;
body {
background-color: $primary-color;
}CSS
body {
background-color: #333;
}변수 범위
Sass의 변수에는 변수범위가 있음
변수를 특정 선택자에서 선언하면 해당 선택자에서만 접근이 가능함
Sass
$primary-color: #333;
body {
$primary-color: #eee;
background-color: $primary-color;
}
p {
color: $primary-color;
}CSS
body {
background-color: #eee;
}
p {
color: #333;
}변수를 선언할 때 global하게 설정하려한다면
!global플래그를 사용함
Sass
$primary-color: #333;
body {
$primary-color: #eee !global;;
background-color: $primary-color;
}
p {
color: $primary-color;
}CSS
body {
background-color: #eee;
}
p {
color: #eee;
}추가적으로
!default플래그는 해당 변수가 설정되지 않았거나 값이null일때 값을 설정함
추후mixin을 작성할 때 유용하게 사용됨
수학 연산자(Math Operators)
주의할점
+,-연산자를 사용할 때는 단위를 언제나 통일시켜야함오류 예시
$box-width: 100% - 20px
해당 작업을 해야한다면calc()함수를 사용하면 됨
Sass
.container { width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}
aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}CSS
.container {
width: 100%;
}
article[role="main"] {
float: left;
width: 62.5%;
}
aside[role="complementary"] {
float: right;
width: 31.25%;
}내장함수(Built-in Functions)
중첩(Nesting)
Sass의 매우 유용한 기능 중 하나는 선언을 중첩시킬 수 있다는 것
부모 선택자를 참조할때는&문자를 사용함
CSS
/* CSS */
.container {
width: 100%;
}
.container h1 {
color: red;
}Sass
/* Sass */
.container {
width: 100%;
h1 {
color: red;
}
}중첩에서 벗어나려면?
@at-root지시자를 사용함
Sass
.container {
.child {
color: blue;
}
@at-root .sibling {
color: gray;
}
}CSS
.container .child {
color: blue;
}
.sibling {
color: gray;
}인셉션규칙
중첩 시 4레벨보다 깊게 들어가지 말 것
불러오기(Import)
import기능은 스타일들을 여러 파일들로 나누고, 다른 파일에서 불러와서 사용하는 기능
@import 'layout.scss';or
@import 'layout';상속(Extend)
Sass에서 특정 선택자를 상속 할때,
@extend지시자를 사용합니다
Sass
.box {
border: 1px solid gray;
padding: 10px;
display: inline-block;
}
.success-box {
@extend .box;
border: 1px solid green;
}CSS
.box, .success-box {
border: 1px solid gray;
padding: 10px;
display: inline-block;
}
.success-box {
border: 1px solid green;
}Placeholder 선택자
%를 사용하면 상속은 할 수 있지만 해당 선택자는 컴파일되지 않음
Sass
%box {
padding: 0.5em;
}
.success-box {
@extend %box;
color: green;
}
.error-box {
@extend %box;
color: red;
}CSS
.success-box, .error-box {
padding: 0.5em;
}
.success-box {
color: green;
}
.error-box {
color: red;
}믹스인(Mixin)
Sass의 핵심기능중 하나
extend와 비슷하지만 argument(인수)를 받을 수 있음
mixin을 선언할 때는@mixindirective를 사용하며, 이를 사용할 때는@includedirective를 사용함
Sass
@mixin headline ($color, $size) {
color: $color;
font-size: $size;
}
h1 {
@include headline(green, 12px);
}CSS
h1 {
color: green;
font-size: 12px;
}응용
#{}표현은 특정 문자열을 다로 처리하지 않고 그대로 출력할 때 사용됨
@content지시자를 사용하면 나중에@include했을 때, 그 선택자 내부의 내용들이@contnet부분에 나타나게 됨
Sass
@mixin media($queryString){
@media #{$queryString} {
@content;
}
}
.container {
width: 900px;
@include media("(max-width: 767px)"){
width: 100%;
}
}CSS
.container {
width: 900px;
}
@media (max-width: 767px) {
.container {
width: 100%;
}
}함수(Function)
mixin과 비슷하지만 차이점은
mixin은 style markup을 반환하지만
function은@returndirective를 통해 값을 반환함
@function지시자 사용
Sass
@function calc-percent($target, $container) {
@return ($target / $container) * 100%;
}
@function cp($target, $container) {
@return calc-percent($target, $container);
}
.my-module {
width: calc-percent(650px, 1000px);
}CSS
.my-module {
width: 65%;
}추가참고자료
postcss vs sass (반대개념?)
sass의 복잡한 문법이 필요 없다면, CSS의 표준 문법에 기반한 postcss를 사용하는 것이 더 편리함
PostCSS === Preset Env
- 본 글에서 언급하는 PostCSS는 Sass처럼 CSS문법을 강화하는 플러그인을 의미
- Sass와 달리 PostCSS의 경우 그 자체로는 아무런 기능이 없고 단순한 플러그인 개발 도구만을 제공할 뿐임
CSS 표준 문법 사용(PostCSS vs Sass)
PostCSS - 문법
- PostCSS는 CSS 표준 문법(CSS 커스텀 프로퍼티)이나 표준화 작업 중에 있는 문법(CSS 중첩(Nesting))을 제공함
- 문법이 표준으로써 기능하기 위해 하위 호환성을 확보하거나 특수한 상황에서도 잘 동작하도록 함
- 쉽게 말하면 CSS와 잘어울리는 문법으로써 설계됨
- 처음 문법을 접하는 사람에게 있어 CSS의 근본적인 동작 방식과 크게 다르다는 느낌이 들지않고 자연스러움
Sass - 문법
- 기본 CSS의 문법을 확장하는 방식을 취함
JS 기반
PostCSS - JS기반
- PostCSS는 JS기반으로써 웹 개발자라면 어렵지 않게 플러그인을 개발해낼 수 있음
- 참고할만한 코드나 예제도 수없이 많음
Sass - Ruby 기반
- Sass는 Ruby 기반으로써 플러그인을 개발하기 위해서는 Ruby를 배워야함
PostCSS단점
강력한 문법을 제공하지 않는다
- PostCSS는 Sass의 함수나 for문같이 강력한 문법을 제공하지 않음
- 정확히 말하면 이런기능을 제공하는 유명하면서도 유지 보수가 잘되는 플러그인을 찾기 어려움
- Sass에 비해 덜 유명함
- 이는 도구에 대한 숙련자가 적다는 것을 의미
postCSS 플러그인 종류
Sass vs Scss
- Sass는 CSS로 컴파일되거나 해석되는 전처리기 스크립팅언어
- SassScript는 그 자체가 스크립팅 언어인 바면 Scss는 기존 CSS구문 위에 구축되는 Sass의 기본 구문
- CSS와 같은 세미콜론과 대괄호를 사용
- Sass는 원본 구문이 필요할 때 사용되며 Scss에는 코드 구문이 필요하지 않음
- Sass는 엄격한 들여쓰기를 쓰지만 Scss는 들여쓰기를 사용하지 않음
- Sass는 공백이 있고 세미콜론이 없는 느슨한 구문을 갖고 있지만 Scss는 CSS스타일에 더 가깝고 세미콜론과 중괄호의 사용은 필수
- Sass의 파일 확장자는 .sass Scss의 파일 확장자는 .scss
- Sass는 Scss보다 더 많은 개발자 커뮤니티와 지원이 있음
dart sass vs node sass
Dart Sass는 Sass의 기본 구현으로 다른 구현보다 먼저 새로운 기능을 제공함
빠르고 쉽게 설치할 수 있고 순수 JS로 컴파일되어 최신 웹 개발 Workflow에 쉽게 통합할 수 있음
node sass는 현재 새로운 기능이 추가되지 않고 있음
장점
- 기본 구조
- 최신 기능
- 순수 JS로 컴파일되는지
- JS로 컴파일되어 통합이 용이함
use, forward?
@import와 유사하지만 기존@import가 가진 문제점을 보완함
Scss 커뮤니티에서는 점진적으로 import를 deprecated하고@use만 사용하도록 할 계획임
@import의 문제점
- pure CSS도
@import를 사용하기 때문에 혼란을 야기할 수 있음 - 같은 파일을 여러번 import하면 코드 충돌과 중복 코드로 인해 컴파일 속도가 느려질 수 있음
- 모든 변수와 함수가 전역으로 관리되기 때문에 같은 이름의 변수나 함수를 사용하면 먼저 선언된 것들이 무시됨
- 어디서 가져온 변수, 함수인지 직관적으로 알 수 없음
@use의 장점
@import가 아닌@use를 사용하기 때문에 혼란을 피할 수 있음@use는 모듈시스템과 동일하게 동작하기 때문에 컴파일 중 단 한번만 import됨@use를 사용하면 모듈별로 별도의 namespace를 가지기 때문에 각 변수와 함수는 독립적으로 사용됨(alias(as) 이용)- 따로 지정하지 않을때는 파일명을 기준으로 namespace를 가짐
- 변수나 함수를 사용할 때는
namespace.function()과 같이 사용하기 때문에 어디서 가져온 요소인지 직관적으로 알 수 있음
@forward는 언제 사용할까
@use와@forward는 비슷한 기능을 함- 둘 다 각 파일의 모든 요소를 import함
- 실제로 컴파일된 CSS결과물도 같음
@use vs @forward
@use와 다르게@forward를 사용하면 페이지 내에서 forward한 모듈의 요소(variables, functions, mixins)를 사용할 수 없다@forward는 전달만 할 뿐임- 만약 forward한 모듈의 요소를 사용하려면 forward로 모듈을 가져온 파일은
@use를 사용해 import하면 됨
연산자(/의 문제)
/를 나누기 연산 기능으로 사용하려면 아래와 같은 조건을 충족해야 함
- 값 또는 그 일부가 변수에 저장되거나 함수에 의해 반환되는 경우
- 값이
()로 묶여있는 경우 - 값이 다른 산술 표현식의 일부로 사용되는 경우
번외
- 0을 곱하면 단위가 생략되버림
npm install option
- npm install name
npm install name- 이렇게 할 경우 pakage.json에서 dependencies에 기록됨
-P(--save-prod)라는 옵션을 부과한 것
- npm install name -D
npm install name -D--save-dev와 동일- 이렇게 할 경우 pakage.json에서 dev-dependencies에 기록됨
- 개발할 때만 필요한 module들을 다운로드 할때 사용함
- npm install name -O
npm install name -O--save-dev와 동일- 이렇게 할 경우 pakage.json에서 optionalDependencies에 기록됨
- 어떤 상황에서만 사용되는 module을 다운로드할 때 사용
- npm install name --no-save
npm install name --no-save- 기록하지 않게 다운로드할 때 사용
- npm install name@0.0.1
npm install name@0.0.1- 이렇게 다운받으면 name이라는 모듈의 0.0.1 버전을 다운받는 것
- npm install name --force
npm install name --force- 이렇게 다운받으면 디스크에 복사본이 있어도 무조건 다시 다운받게 강제함
- npm install name -g
npm install name -g- 전역으로 설치
map 파일?
naem.css.map 파일은 sass파일이 css 파일로 컴파일될 때 생성되는 json 형식의 파일
CSS 파일의 각 행을 Scss소스 파일의 해당 행에 연결하는 정보가 들어 있음
영상자료
