CSS 란?
- Cascading Style Sheets 는 documents 가 사용자에게 어떻게 보여질까를 기술하는 언어이다.(위에서 아래로 흐르는 스타일 시트)
- HTML 이 정보를 표현한다면 CSS 는 HTML document 를 시각적으로 꾸며주는 역할을 한다.
CSS 작성법
- 외부 스타일 시트(External Style Sheet)
- 내부 스타일 시트(Internal Style Sheet)
- HTML 태그 내에 스타일 지정(Inline Styles)
// External
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
// Internal
<head>
<style type="text/css">
.div-box {
color:red
}
</style>
</head>
// Inline
<p style="font-size: 15px;">15픽셀사이즈로 디자인됩니다.</p>CSS 적용순위
- 속성값 뒤의 !important
- 태그에 inline 으로 style 속성 지정
- 선택자가 #id
- 선택자가 .class 및 pseudo 클래스(:hover)
- 선택자가 tag 이름
- 만약 순위가 같다면,
<style>태그나 CSS 파일에서 나중에 나온것이 적용이 된다.
CSS 문제점
- 모두 전역 범위임
- 스타일이 속성이 자식 요소에 상속됨
- 우선순위에 따라 적용이 달라짐
- 확장성이 부족함
- 오류가 생기기 쉽고, 오류를 막을 수단이 없음(즉, 작은 실수 하나로도 프로젝트 전체에 영향을 미침)
위 같은 문제를 해결하고자 CSS 설계방법 및 규약(external 방식, BEM 표기 및 선택자를 클래스로만 제한 등) 등 방법들이 있으나 근본적으로 CSS 의 문제를 제한하기는 어려움
CSS 전처리기(Preprocessor)
- CSS 전처리기(CSS Preprocessor)는 모듈별로 특별한 Syntax 를 가지고 있고 여기에 믹스인(mixin), 중첩 셀렉터(nesting selector), 상속 셀렉터(inheritance selector) 등 Programmatically 한 요소를 접목해 방대해지는 CSS 문서의 양을 효율적으로 처리하고 관리해 주는 통합적인 단어를 말한다.
- CSS 전처리기(CSS Preprocessor) 자체만으로는 웹 서버가 인지하지 못하기 때문에 각 CSS 전처리기에 맞는 Compiler 를 사용해야 하고 컴파일을 하게 되면 실제로 우리가 사용하는 CSS 문서로 변환이 된다.
SASS, LESS Stylus 등이 CSS 전처리를 도와주는 도구다.
SASS(SCSS) 란?
- Syntactically Awesome Style Sheets 약자로 CSS 를 확장한 언어다.
- SASS 는 SASS 표기법(.sass)과 SCSS(.scss) 표기법이 존재하는데, Sass 3.0 부터 기본 표기법으로 채택된 SCSS (Sassy CSS) 사용을 권장하고 있다.
- SASS를 유지하는 사람들은 조금더 CSS에 친숙한 전처리기를 만들기 위해, Sassy CSS(SCSS)를 내놓았씁니다. SASS / SCSS 는 거의 동일한 기능을 가지고 있으며, SASS는 중괄호, 세미콜론 같은 기호를 없애기 위해, 들여쓰기에 의존하며 이는 간결한 문장으로 이어진다. 하지만 이는 실제 CSS 문법과는 그 차이를 두고 있다. SCSS는 주로 CSS 올려진 작은 추가사항이므로, CSS에 친숙한 사람이라면 알아보기가 더 쉽다.
/* SCSS */
$primary-color: #3bbfce;
$secondary-color: #ff8700;
.content {
background-color: $primary-color;
color: darken($secondary-color, 9%);
}
// mixin
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.box { @include border-radius(10px); }
$max-width: 980px;
// function
@function columns($number: 1, $columns: 12) {
@return $max-width * ($number / $columns)
}
.box_group {
width: $max-width;
.box1 {
width: columns(); // 1
}
.box2 {
width: columns(8);
}
}/* SASS */
$primary-color: #3bbfce
$secondary-color: #ff8700
.content-navigation
background-color: $primary-color
color: darken($secondary-color, 9%)
=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
.box
+border-radius(10px)Nesting Selectors :
.section { width: 100%; .list { padding: 20px; li { float: left; } } }Nesting Properties :
.box { font: { weight: bold; size: 10px; family: sans-serif; }; margin: { top: 10px; left: 20px; }; padding: { bottom: 40px; right: 30px; }; }Variables : $varWitdh : 200px
Mixins : @mixin
Ampersand(상위 선택자 참조) : &
등..
- SASS(SCSS)를 사용하면 nesting 을 통해 selector 의 관계를 명확하게 이해할 수 있을 뿐만 아니라 변수를 활용함으로써 코드의 중복을 피할 수 있습니다.
공식 사이트 : https://sass-lang.com/
테스트 사이트 : https://www.sassmeister.com/
developer life started : 2016.06.07 ~ 흔한 Front-end 개발자