메뉴 보이기
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄 첨부
Extra Form
출처 https://blog.naver.com/kira4195/221262057145


SCSS = SASS + CSS
SASS 컴파일러로 SCSS파일이 CSS파일이 됨



- SCSS는 CSS를 보다 효율적으로 보다 편리하게 사용하기 위해 만들어진 언어다. SASS와 CSS의 중간쯤이라고 볼 수 있지만 SASS를 몰라도 SCSS는 할 수 있다. 기본적으로 CSS를 바탕으로 하고 있기 때문에 CSS를 써본 사람이라면 SCSS의 공부가 그렇게 어렵진 않다. JAVASCRIPT 를 공부하고 있는 웹 퍼블리셔라면 더욱이 받아들이기 쉬울 것이다.
- SCSS로 작성한 후 SASS 컴파일러를 돌리면 SCSS언어는 CSS언어로 바뀌어 결과적으로 웹에 적용되는 것은 이미 알고 있는 CSS언어이다. 컴파일도 크게 어렵지는 않다. 한 번 SCSS에 대해 살펴보자.


1. 네스팅 (nesting)

- 우선 네스팅이란 서브루틴 중에 다른 서브루틴을 짜넣는 것. 더욱이 일반적으로는 프로그램 루틴 중에 다른 프로그램 루틴 또는 일군의 데이터를 짜넣는 것이다. - 출처 네이버 지식백과

셀렉터 네스팅

- html 구조상 div 안에 있는 p 처럼 하위구조를 가지고 있을 경우, div의 속성 정의 블록 안에 하위에 있는 p가 들어갈 수 있다.
scss 파일 만으로도 html  구조를 알 수 있으며 타고 들어가는 것이 많을 때 유용하다.

// SCSS .div {  p {    color:skyblue;  } } // css .div p {color:skyblue}

- 위의 scss와 밑의 css의 내용은 같다. scss를 컴파일하면 밑의 css가 되는 형태이다.

속성 네스팅

- 축양형으로 묶일 수 있는 속성들 끼리도 네스팅이 가능하다. 예를 들어 font의 경우 font-family, font-size, font-weight등이 있는데 다음과 같이 속성의 하위 사전 형태로 작성할 수 있다.

.entry-content {  p {    font: { /* font  옆에 : 이 온다는 걸 놓치지 말자 */      family: "Noto Serif CJK KR", serif;      size: 9.814rem;      weight: 400;    }  } }


상위요소 치환

- 어떤 선택자의 { } 안에서 &를 쓰면 중괄호를 취하는 선택자 자신을 의미한다. div { &{} } 여기서 &는 div이다. 본인에게 속성을 준 후 :hover나 :target등을 이어서 줄 때 유용하다.

//scss a {  color:#666;  &:hover { color:yellow; } /* a:hover와 같다. */ } //css a {color:#666} a:hover { color:yellow' }

- 위의 scss 와 밑의 css는 같은 내용이다.

- 글자 그대로 &가 상위의 글자 a로 치환되는 것이기 때문에 그 뒤로 '글자'를 이어서 써서 선택자 클래스명 이름을 완성할 수도 있다. 

//scss .btn {   display:inline-block; padding:3px 10px; border:1px solid #000;   &_blue { background-color:blue; border:0; }   &_yellow { background-color:yellow; border:0; } } //css .btn { display:inline-block; padding:3px 10px; border:1px solid #000; } .btn_blue { background-color:blue; border:0; } .btn_yellow { background-color:yellow; border:0; }


2. 변수와 연산자

- 색상이나 선 스타일, 폰트 패밀리등은 대체로 사이트 내에서 공통적으로 정의해놓은 값을 쓰는 경우가 많다. 이들을 매번 지정하지 않고 변수로 들어서 사용하면 변경 시점에 변수의 내용만 수정하여 모든 곳의 값을 공통적으로 바꿀 수 있다.

변수 타입

- SASS에서 변수는 타입을 가지며, 각 타입에 대한 평가나 연산도 가능하다.

타입
예시
설명
숫자값
14px, 1.534rem
 숫자 리터럴로 쓰인 값은 숫자로 판단. 크기를 나타내는 단위가 붙은  경우도 숫자로 취급한다.
문자열
글자
 따옴표 여부에 관계없이 문자는 문자열로 취급한다.
색상값
blue, #aa33cc, rgba(255,255,255,0.5)
  색상명이나 색상리터럴로 표기된 값은 색으로 인식한다.
불리언
true, false
  참과 거짓 값
null
  비어있는 값
:
  괄호 속에서 : 으로 키 : 값을 구분하여 쓴다.


- 숫자값의 경우에는 사칙 연산 및 산술 연산 함수의 적용이 가능하다. 하물며 #111111같은 색 값에서도 연산이 가능하다.
- 색 값 더하거나 빼면 색이 밝아지거나 어두워진다. 받은 시안대로 할 때 잘 쓰진 않는다.

※ 나눗셈은 원래 CSS에서도 존재하여 SASS컴파일러는 해당 표기를 연산이라 판단하지 않는다. 수식을 괄호로 묶으면 강제로 연산으로 처리된다. 그외에도 덧셈등의 다른 연산자와 같이 쓰인 경우에도 나눗셈 연산으로 처리된다.


문자열의 치환 및 내삽(interpolation)

#{...} 을 사용하면 문자열 내에 표현식의 결과를 넣거나, 다른 변수의 내용으로 치환하는 것이 가능하다. 속성값의 일부나 전체 모두 적용 가능하고 속성명과 셀렉터에 대해서도 적용 가능하다.

// SCSS $on: active; $fontsize: 14px; $lineheight: 30p; p {  font: #{$fontsize}/#{$lineheight};  &.#{$on} { color: red; } } // CSS p { font: 14px/30px; } p.active { color: red; }


3. 임포트 (@import)

- @import 지시어를 이용해서 다른 css 파일을 임포트할 수 있다. 사실 이 기능은 css의 원래 기능이다. 대신 css 파일이 아닌 scss, sass 파일을 임포트할 수 있다.

4. 확장 (@extend)

- 확장은 이미 정의해둔 다른 셀렉터의 속성에 현재 셀렉터가 얹어가는 효과를 낼 수 있다.  따라서 특정한 클래스군에 대해서 베이스 클래스에서 공통 속성을 지정하여, 다른 클래스들이 베이스 클래스를 상속받는 효과를 낼 수 있다.  확장 문법은 @extend 최상위셀렉터의 형태로 사용한다.

// SCSS .message {  border: 1px solid #ccc;  padding: 10px;  color: #333; } .success {  @extend .message;  border-color: green; } .error {  @extend .message;  border-color: red; }


5. 믹스인 (@mixin)

- 공통적으로 많이 쓰이는 CSS 선언값들을 묶어서 믹스인으로 만들어 재사용이 가능하게끔 할 수 있다. 변수는 단일 값을 담을 수 있는 것에 비해, 믹스인은 여러 속성의 정의 및 셀렉터에 대한 속성 전체등 블럭 단위로 재사용할 수 있다.
- 믹스인을 정의할 때에는 파라미터를 받아 파라미터 값에 따른 가변적 속성 집합을 만들 수 있다. 다음 예는 둥근 외곽선을 지정할 때 벤더별로 다른 접두어가 붙는 속성들을 매번 반복해서 쓰지 않도록 하는 테크닉이다.

// SCSS @mixin border-radius($radius) {  -webkit-border-radius: $radius;  -moz-border-radius: $radius;  -ms-border-radius: $radius;  border-radius: $radius; } .box { @include border-radius(10px); }

-  믹스인은 @mixin 키워드를 이용해서 이름과 인자를 선언한다. 인자가 필요없는 믹스인은 ($인자) 부분을 생략할 수 있다. 인자는 일반 변수처럼 정의한다.
믹스인을 사용할 때에는 @include 지시어를 사용한다.

믹스인의 인자값

- 믹스인의 인자는 선언하는 만큼 사용할 수 있다. 만약 인자값에 디폴트를 적용하고 싶다면, 변수 선언과 같은 문법으로 인자변수의 초기값을 설정해 줄 수 있다.

@mixin dashed-box($color, $width: 2px) { .. }

- @include 구문에서 인자값은 선언된 순서대로 쓸 수 있으며, 보다 명확한 구분을 위해서 인자의 이름을 직접 기입할 수 있다. 인자의 각 이름을 명시한 경우에는 순서가 바뀌어도 상관없다.

.box { @incluxe dashed-box($width: 3px, $color: #eee) }
리스트 인자

- 인자명에 ... 을 붙이면 단일 값이 아닌 리스트로 인자를 받는 다는 의미이다. 이는 일련의 연속값을 속성으로 사용하는 경우에 활용할 수 있다.

이 문법은 파이썬의 *args, **kwds 등 시퀀스/맵 분해와 비슷하게 동작한다. 아래에서 살펴보겠지만 인자를 넣는 시점에도 같은 식으로 전달할 수 있다.

예를 들어 그림자 속성은 컴마로 구분된 리스트가 될 수 있다.

@mixin box-shadow($shadows...) {  -moz-box-shadow: $shadows;  -webkit-box-shadow: $shadows;  box-shadow: $shadows; } .shadows { @include box-shadows(0px 4px 5px #666, 2px 6px 10px #999); }

... 표현은 리스트나, 맵을 개별 인자들로 분해해서 함수나 믹스인에 전달할 때 사용될 수 있다.

@mixin colors($text, $background, $border) {  color: $text;  background-color: $background;  border-color: $border; } $values: #ff0000, #00ff00, #0000ff; .primary { @include colors($values...); }
블럭을 믹스인에 넘기기

- 흔한 케이스는 아니지만, 블럭 자체를 믹스인에 넘겨줄 수 있다.  믹스인내에서 @content 지시어를 쓴 부분이 넘겨받은 블럭으로 치환된다.

@mixin code-inline {  code {    background-color: #cecece;    padding: 2px;    border-radius: @include border-raidus(4px);    font-family: monospaces;    @content  } } p {  @include code-inline {    color: #33ccff;    font-size: .8em;  } }


6. 커스텀 함수

- css 속성 정의의 모듈화와 재사용은 믹스인을 통해서 처리하면 된다. 함수는 어떤 값들을 사용해서 하나의 리턴값을 생성하는 용도로 사용하는 것이 좋다. 함수의 정의는 @function 지시어를 통해서 정의하며, 내부에서는 @return 지시어를 통해서 값을 내보낸다. 다음 예는 그리드 시스템에서 개별 셀과 여백의 크기를 통해서 n칸짜리 요소의 폭을 계산하는 함수이다.

// SCSS $grid-width: 40px; $gutter-width: 10px; @function grid-width($n) {   @return $n * $grid-width + ($n -1 ) * $gutter-width; } #sidebar { width: grid-width(5); } // 믹스인과 달리 @include를 쓰지 않는다.

- 함수 역시 믹스인과 마찬가지로 복수 인자 및 인자 분해 등을 적용해서 사용할 수 있다. 또한 SASS 내에서는 여러 기본 함수들이 내장되어 있다.


7. 흐름제어

- 함수나 믹스인을 작성할 때 특정 조건에 따른 분기나, 조건 혹은 연속열 (리스트 나 맵)의 각 원소에 대해 반복하는 등 흐름 제어와 관련된 기능을 사용해야 할 필요가 있다. 이 때 흐름제어 지시어들을 사용할 수 있다.

분기분

- 분기구문은 @if 절을 이용하여 작성한다. @if 표현식 { ... } @else if 표현식 { ... } @else { ... } 식으로 연결되는 다중 분기를 만들 수 있다.

@mixin hcolor($n) {  @if $n % 2 == 0 { color: white; }  @else { color: blue; } } .row-3 { @include hcolor(3); }  @function text-color($brightness) {  @if $brightness < 128 { @return #333; }  @return #ccc; } code { color: text-color(200);
반복문

1. @for : n ~ m 까지의 숫자 범위에 대해 각 정수값에 대해 순회한다.
2. @each : 주어진 리스트나 맵의 각 원소에 대해 순회한다.
3. @while : 주어진 조건을 만족하는 동안 반복한다.

@for $i from 1 through 3 { // 1, 2, 3,에 대해 반복  .time-#{$i} { width: 2em * $i; } } // 리스트 내 각 문자열 원소에 대해서...  @each $animal in puma, sea-slug, egret, alamander {  .#{$animal}-icon {    background-image: url('/image/#{$animal}.png');     } } // 6, 4, 2번 아이템에 대해서  $i : 6; @while $i > 0 {  .item-#{$i} { width: 2em * $i }  $i: $i - 2; }


 - SCSS 문법은 더 다양하지만 자주쓰는 것 위주로 정리되어 있습니다 



* 참고 사이트



  1. 공지사항 notice

    UI컴포넌트는 UI프레임워크 게시판에 글을 작성해주세요

    Date2018년 05월 27일 Categorycss 조회22 좋아요0
    켄도UI,JUI,UIKIT 등의 UI프레임워크는 UI프레임워크 게시판에 작성해주세요.
    read more
  2. 공지사항 notice

    CSS(Cascading Style Sheet) 뜻

    Date2018년 05월 13일 Categorycss 조회41 좋아요0
    CSS의 약자는 Cascading Style Sheet의 약자입니다. Cascading 의 사전적 뜻은 '폭포처럼, 계속되는, 연속적인'이란 의미를 가집니다. 윈도우 정렬 모드 중 Cascading으로 하면 차곡차곡 정렬되는 그런 형태를 말하는데, CSS는 '우선순위가 있는 ...
    read more
  3. 공지사항 notice

    CSS(Cascading Style Sheet) 뜻

    Date2018년 05월 13일 Categorycss 조회24 좋아요0
    CSS의 약자는 Cascading Style Sheet의 약자입니다. Cascading 의 사전적 뜻은 '폭포처럼, 계속되는, 연속적인'이란 의미를 가집니다. 윈도우 정렬 모드 중 Cascading으로 하면 차곡차곡 정렬되는 그런 형태를 말하는데, CSS는 '우선순위가 있는 ...
    read more
  4. 공지사항 notice

    html/css/javascript 공부하는 사이트

    Date2018년 01월 02일 CategoryLayout 조회52 좋아요0
    html/css/javascript 공부하는 사이트 https://developer.mozilla.org/ko/docs/Web https://www.w3schools.com/ CSS https://css-tricks.com/ CSS Layout http://ko.learnlayout.com/ http://www.free-css.com/free-css-layouts/page1 https://www.w3schools.c...
    read more
  5. notice

    Metirial Icons (머티리얼 디자인 아이콘)

    Date2015년 12월 06일 Category아이콘폰트 조회104 좋아요0
    머티리얼 디자인https://material.io/tools/icons https://github.com/google/material-design-icons/tree/master/action/svg/design [사용법] <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><i class="material-ic...
    read more
  6. SVG svg 파일을 id값으로 클래스화해서 사용하기

    Date2019년 01월 07일 CategorySVG 조회24 좋아요0
    svg 파일을 id값으로 클래스화해서 사용하기 <svg><symbol id="ID명"></symbol></svg> 이렇게 심볼로 만든 다음에 <svg><usr xlink:href="#ID명"></use></svg> 이런 식으로 사용 가능하네요. <svg class="클래스명"> 이렇게 써줄 수도 있습니다.
    Read More
  7. SCSS [SCSS] SCSS문법 정리 네스팅 변수 @import @mixin @include @for @each @while

    Date2018년 09월 01일 CategorySCSS 조회94 좋아요0
    SCSS = SASS + CSS SASS 컴파일러로 SCSS파일이 CSS파일이 됨 - SCSS는 CSS를 보다 효율적으로 보다 편리하게 사용하기 위해 만들어진 언어다. SASS와 CSS의 중간쯤이라고 볼 수 있지만 SASS를 몰라도 SCSS는 할 수 있다. 기본적으로 CSS를 바탕으로 하고 있...
    Read More
  8. (번역) CSS flex box 3분만에 배우기 https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/ > flex 의 기본 개념에 대해서 가장 간단하게 설명한 글입니다. CSS Flexbox https://www.w3schools.com/css/css3_flexbox.asp > w3schools...

    그리드 flex 개념 알기

    Date2018년 08월 25일 Category그리드 조회53 좋아요0
    (번역) CSS flex box 3분만에 배우기 https://joshuajangblog.wordpress.com/2016/09/19/learn-css-flexbox-in-3mins/ > flex 의 기본 개념에 대해서 가장 간단하게 설명한 글입니다. CSS Flexbox https://www.w3schools.com/css/css3_flexbox.asp > w3schools...
    Read More
  9. css <style> .parallax { /* The image used */ /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .s8_3{...

    css parallax only css

    Date2018년 08월 14일 Categorycss 조회27 좋아요0
    css <style> .parallax { /* The image used */ /* Full height */ height: 100%; /* Create the parallax scrolling effect */ background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; } .s8_3{...
    Read More
  10. 마진 상쇄 현상을 해결하는 방법으로 여러 가지 방법이 있겠습니다만, 개인적으로는 display:inline-block;width:100%; 를 이용합니다.

    css 마진 상쇄 현상 해결팁

    Date2018년 07월 30일 Categorycss 조회80 좋아요0
    마진 상쇄 현상을 해결하는 방법으로 여러 가지 방법이 있겠습니다만, 개인적으로는 display:inline-block;width:100%; 를 이용합니다.
    Read More
  11. https://codepen.io/eond/pen/xWQgGB ">

    SVG CSS HEXAGON

    Date2018년 04월 19일 CategorySVG 조회21 좋아요0
    https://codepen.io/eond/pen/xWQgGB ">
    Read More
  12. @keyframesBefore applying animations to HTML elements, you need to write animations using keyframes. Basically, keyframes are each intermediate step in an animation. They are defined using percentages: 0% is the first step of the animation 5...

    css CSS animation infinite

    Date2018년 04월 13일 Categorycss 조회12 좋아요0
    @keyframesBefore applying animations to HTML elements, you need to write animations using keyframes. Basically, keyframes are each intermediate step in an animation. They are defined using percentages: 0% is the first step of the animation 5...
    Read More
  13. /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align...

    css CSS로 Center 정렬

    Date2018년 01월 13일 Categorycss 조회19 좋아요0
    /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align...
    Read More
  14. CSS [attribute*=value] Selectorhttps://www.w3schools.com/cssref/sel_attr_contain.asp example https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_attr_contain div[class*="test"] { background: #ffff00; }

    css css 선택자 | CSS [attribute*=value] Selector

    Date2018년 01월 02일 Categorycss 조회16 좋아요0
    CSS [attribute*=value] Selectorhttps://www.w3schools.com/cssref/sel_attr_contain.asp example https://www.w3schools.com/cssref/tryit.asp?filename=trycss3_attr_contain div[class*="test"] { background: #ffff00; }
    Read More
  15. See the Pen socialIcon with XEicon by eond (@eond) on CodePen.

    CSS아이콘 social Icon with XE icon

    Date2017년 12월 22일 CategoryCSS아이콘 조회59 좋아요0
    See the Pen socialIcon with XEicon by eond (@eond) on CodePen.
    Read More
  16. ul > li 로 꾸몄는데 1 2 3 4 5 6 7 8 9 이렇게 나오는 스타일을 1 4 7 2 5 8 3 6 9 이런 형식으로 나오게 하는 방법입니다. #col { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }

    css ul 컬럼 다단

    Date2017년 12월 20일 Categorycss 조회60 좋아요0
    ul > li 로 꾸몄는데 1 2 3 4 5 6 7 8 9 이렇게 나오는 스타일을 1 4 7 2 5 8 3 6 9 이런 형식으로 나오게 하는 방법입니다. #col { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; }
    Read More
  17. ::-webkit-input-placeholder { color: #CCC; } /* Firefox 4-18 */ :-moz-placeholder { color: #CCC; } /* Firefox 19+ */ ::-moz-placeholder { color: #CCC; } /* IE10+ */ :-ms-input-placeholder { color: #CCC; }

    input input 속성 중 placeholder 의 색 바꾸기

    Date2017년 09월 25일 Categoryinput 조회54 좋아요0
    ::-webkit-input-placeholder { color: #CCC; } /* Firefox 4-18 */ :-moz-placeholder { color: #CCC; } /* Firefox 19+ */ ::-moz-placeholder { color: #CCC; } /* IE10+ */ :-ms-input-placeholder { color: #CCC; }
    Read More
  18. [js] $(document).ready(function(){ $('#menu-trigger').click(function(){ $(this).toggleClass('active'); }); }); 출처 : http://codepen.io/elliottmangham/pen/RoVwRm

    CSS아이콘 Animated dots icon

    Date2017년 03월 30일 CategoryCSS아이콘 조회49 좋아요0
    [js] $(document).ready(function(){ $('#menu-trigger').click(function(){ $(this).toggleClass('active'); }); }); 출처 : http://codepen.io/elliottmangham/pen/RoVwRm
    Read More
  19. 참조 http://codepen.io/akademy/pen/FlkzB http://nubiz.tistory.com/443

    css [CSS] 배경 이미지에만 흐림효과(Blur) 적용하기 :: Life is an egg.

    Date2017년 03월 27일 Categorycss 조회775 좋아요0
    참조 http://codepen.io/akademy/pen/FlkzB http://nubiz.tistory.com/443
    Read More
  20. css CSS로 표현하는 스텝바(Step bar only CSS)

    Date2016년 10월 04일 Categorycss 조회107 좋아요0
    http://codepen.io/eond/pen/ALbQbr http://codepen.io/eond/pen/BLmwzZ
    Read More
  21. 웹킷엔진을 사용하는 브라우저에서 두줄이상 여러줄 말줄임 처리가 가능한 프로퍼티가 생겼다. 이름은 -webkit-line-clamp 언제 생겼는지 참 유용하다! .ellipsis{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; ...

    css 두줄이상 여러줄 멀티라인 말줄임 처리 (-webkit-line-clamp)

    Date2016년 07월 05일 Categorycss 조회5338 좋아요0
    웹킷엔진을 사용하는 브라우저에서 두줄이상 여러줄 말줄임 처리가 가능한 프로퍼티가 생겼다. 이름은 -webkit-line-clamp 언제 생겼는지 참 유용하다! .ellipsis{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; ...
    Read More
Board Pagination Prev 1 2 3 4 5 6 Next
/ 6