CSS 전처리 언어인 SASS
CSS와 달리 조건문,반복문,변수,함수가 존재함
따라서 반복적인 부분이 쉽게 처리가 가능하다.
개이득
SASS는 CSS로 컴파일되거나 해석될 프리프로세서 스크립팅 언어.
SCSS가 기존의 CSS 구문 위에 구축된 SASS의 주요 구문인 반면,
SassScript는 그 자체로 스크립트 언어.
CSS(Cascaded Style Sheets)와 같은 세미콜론과 괄호를 사용.
SASS와 SCSS는 서로 가져올 수 있다.
SASS는 실제로 수학과 변수 지원으로 CSS를 더 강력하게 만든다.
SASS와 SCSS의 주요 차이점.
- SASS는 원본 구문이 필요할 때 사용되며, SCSS에는 코드 구문이 필요하지 않다.
- SASS는 엄격한 들여쓰기를 따르며, SCSS는 엄격한 들여쓰기가 없다.
- SASS는 공백과 세미콜론이 없는 느슨한 구문을 가지고 있으며, SCSS는 CSS 스타일과 더 유사하며 세미콜론과 괄호의 사용이 필수적이다.
- SASS 파일 확장자는 .sass이고 SCSS 파일 확장자는 .scss.
- SCSS는 SassDoc을 지원하여 문서를 추가하는 반면 SCSS는 인라인 문서를 허용.
- SASS는 CSS로 사용될 수 없으며 그 반대의 경우도 마찬가지로 유효한 CSS 코드이다.
- SCSS는 기존의 CSS 프로젝트에 추가하기 어려운 반면,
SCSS는 새로운 코드를 추가하는 것만으로 기존의 CSS 프로젝트에 쉽게 추가할 수 있다.
중괄호 사용 유무때문에 개인적으로 SCSS가 더 좋다.
셋팅해보자
Live server는 HTML, CSS코드만 읽을 수 있기 때문에
scss -> css 변환해서 사용해야 한다.
유용한 예
변수 사용 (영어, 한글 모두 가능)
어렵거나 복잡한 요소를 사용할때
/* SCSS */
$메인컬러 : #2a4cb2;
$폰트컬러 : white;
.box {
background-color: $메인컬러;
color: $폰트컬러;
text-align: center;
line-height: 200px;
width: 200px;
height: 200px;
margin: 50px;
}
근데 위와같은 함수를 CSS로 사용할 수도 있다.
/* CSS */
:root {
--main-bg-color: brown;
}:root는 전역 CSS 변수 선언하는 의사요소
사칙연산도 가능!
하지만~ 단위가 같아야한다.
더하기, 빼기 연산을 할 때 :px끼리, $단위끼리, %단위끼리
곱셈 나눗셈은 뒤에 단위를 쓰지 않는다. 그리고 괄호 안에 작성해야 문제없이 작동이 잘 된다!
/* SCSS */
.box {
font-size : $기본사이즈 + 2px;
width : (100px * 2);
height : (300px / 3)
}scss와 sass 파일의 차이!
괄호 유무
scss는 괄호가 필요함
sass는 괄호 필요없음
nesting 문법을 활용한 비교 예제
nesting 사용시 2개이상 중첩은 하지말자
↓
/* SCSS */
.main-bg {
width : 100px;
h4 {
font-size: 16px;
}
button {
color: white;
}
}
/* SASS */
main-bg
width : 100px
h4
font-size: 16px
button
color: white@extend 문법
/* SCSS */
/* 임시 클래스 복사 */
%btn {
width: 50px;
height: 50px;
padding: 30px;
}
.btn-yellow {
@extend %btn;
color: yellow;
}
/* 정식 클래스 복사 */
.btn {
width: 50px;
height: 50px;
padding: 30px;
}
.btn-yellow {
@extend .btn;
color: yellow;
}%기호는 임시 클래스명.
뼈대가 되는 부분을 클래스로 만들어서
중복으로 적용이 되는 셀렉터들에게 적용해주는 것.
변수와 다르게 여러개의 요소 적용이 가능!
임시클래스의 특징은 단독으로 컴파일되지 않는다
따라서 CSS파일에서 클래스에서 컴파일하고 싶지 않을때 사용.
(컴파일하고 나면 %기호 안에 있는 것들은 모두 사라지기 때문)
@mixin 문법
긴 코드를 짧은 단어로 축약할 때 쓴다.
글자 중간에 $변수 혹은 $파라미터 넣을 때 #{$변수명}을 사용!
@mixin list($컬러) {
font-family: Arial, Helvetica, sans-serif;
width: 500px;
height: 50px;
padding: 30px;
color: $컬러;
}
.list1 {
@include list(red);
}
.list2 {
@include list(blue);
}
.list3 {
@include list(green);
}
@use '파일경로';
다른파일(파일경로)에 있는 내용을 가져오고 싶을 때
@import와 같은 역할이라고 보면 된다.
예를 들어 abc.scss 파일을 가져오고 싶다면
작명할때 _파일명.scss 로 한다.
@use '_abc.scss';이렇게 서브역할을 해주는 파일은 컴파일해줄 필요가 없기때문에 구별해주는 것!
다른 파일의 @mixin, $변수도 가져올 수 있다.
파일명.$변수
로 작성해야함.
@use '_abc.scss';
reset.$변수명; /* 다른 파일의 변수쓰는법 */
@include abc.mixin이름(); /* 다른 파일의 mixin쓰는법 */@mixin, nesting 문법 예제
<!-- HTML -->
<link href="test.css?ver=1" rel="stylesheet" type="text/css" />
<title>Document</title>
</head>
<body>
<div class="container">
<div class="box1">
<p class="text"><span>Well done!</span> You successfully read this important alert message.</p>
</div>
<div class="box2">
<p class="text"><span>Well done!</span> You successfully read this important alert message.</p>
</div>
<div class="box3">
<p class="text"><span>Well done!</span> You successfully read this important alert message.</p>
</div>
</div>/* SCSS */
@mixin box($배경, $글자색) {
background-color: $배경;
color: $글자색;
border-radius: 5px;
padding: 5px 15px;
margin-bottom: 10px;
font-family: Arial, Helvetica, sans-serif, serif;
font-size: 15px;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 800px;
height: 100vh;
margin-bottom: 0px;
padding-bottom: 5px;
.box1 {
@include box(rgba(250, 128, 114, 0.363), rgb(243, 69, 50));
}
.box2 {
@include box(rgba(114, 250, 232, 0.363), rgb(8, 184, 160));
}
.box3 {
@include box(rgba(114, 139, 250, 0.363), rgb(3, 38, 197));
}
/* nesting 문법 */
}
p {
margin-bottom: 0px;
}
span {
font-weight: 600;
}
SCSS 파일 수정해도 CSS파일에 적용이 안된다면?!
이렇게 HTML linke에 ?ver=1 을 추가하거나!
(버전 정보를 추가하면 브라우저가 기존 URL과는 다른 URL임을 인식하게 되어 캐쉬된 파일대신에
쿼리스트링이 추가된 CSS파일을 사용하게 된다)
ctrl + F5를 눌러본다. (브라우저 캐쉬 갱신)
이래도 안된다면 SCSS문법에 error가 난 것이니 꼭 확인해보자!!
코딩애플 강의를 듣고 작성하는 글입니다.
'CSS' 카테고리의 다른 글
| [CSS]Grid (0) | 2023.01.23 |
|---|---|
| [CSS]애니메이션 효과 주기 (0) | 2023.01.23 |
| [CSS]pseudo-elements(의사요소),ShadowDOM (2) | 2023.01.22 |
| [CSS]IE 이전버전과 호환하기 (1) | 2023.01.19 |
| [CSS]background 태그로 배경넣기 (0) | 2023.01.16 |
