소개

요 전날 Sass에 대해 실천에서 사용할 수있게되어 가기 위해 책을 구입하고 실제로 코딩하면서 출력했습니다. 솔직히, 앞으로도 점점 사용해 가는 기능이라고 생각하기 때문에 자신의 비망록으로서 Sass의 기본 기능을 남겨 두려고 생각합니다. Sass의 기본 기능에 관해서는 많이 인터넷에 굴러 떨어지고 있습니다만, 초보자 중의 초보자는 이쪽의 책을 보면서 손을 움직이는 편이 습득은 빠를까 생각됩니다. 그 정도 정중하게 해설되고 있었습니다. node.js의 설치 방법 등은 이쪽의 책을 참고로 하고, Sass의 대략적인 기능등은 아래와 같이 정리한 것을 참고로 받을 수 있으면 다행입니다.

원래 "Sass"란 무엇인가?

Sass는 CSS를 확장한 메타언어. CSS를 보다 편리하고 효율적으로 쓸 수 있도록 한 언어.
사용할 수 있게 되기 위해서는 Node.js의 설치나 gulp를 사용할 수 있게 될 필요가 있습니다만 이번은 생략・・・

목차

1. 기본 중첩
2. 부모 선택기 참조
3. 변수
4. 연산
5.믹스 인

1. 기본 중첩

이 기능이 가장 많이 사용하는 대표적인 기능인 것 같다. 사용해 본 실감으로서는 CSS가 HTML과 같이 트리 구조로 되어 있기 때문에 가독성이 뛰어나다. 보기 쉽고 쓰기 쉬운.
다음은 실제로 자신이 쓴 때의 예입니다.

HTML

HTML
    <header>
      <h1 class="corp_logo">
        <a href="#">CITY<span class="logo_last">Lab</span></a>
      </h1>
    </header>

네비게이션을 만드는 HTML이 있고, 통상의 CSS로 쓰면 아래와 같이

CSS

CSS

header {
  width: 100%;
  height: 80px;
  text-align: center;
}

header h1{
  font: normal 28px/10px "Helvetica Neue";
  color: #029ae2;
  float: left;
  margin: 30px;
}

header의 근접 선택기인 h1을 기술하고 있습니다만, Sass로 쓰면...

Sass

Sass

header {
  width: 100%;
  height: 80px;
  text-align: center;
  h1{
    font: normal 28px/10px "Helvetica Neue";
    color: #029ae2;
    float: left;
    margin: 30px;
　}
}

이런 느낌으로 중첩 구조로 할 수 있는 것이군요. 중첩 기능은 보기 쉽다! !

2. 부모 선택기 참조

& (앰퍼 사이드)를 사용하는 사람입니다. 의사 요소라든지와 조합하거나.
지금까지 부모 선택기를 복사하고 싶습니다.

CSS

CSS

a{
 text-decoration: none:
}
a:hover{
 text-decoration: underline;
}

Sass

Sass

a{
    text-decoration: none:
    &:hover{
    text-decoration: underline;
    }
}

3. 변수 마크업 언어로 변수라든지 사용할 수 있다고 놀랐습니다. 요점은 정의해 주고, 호출할 수 있는 기능으로 해서 배경색이나 문자의 사이즈라든지 몇 페이지에 걸쳐서 사용 돌릴 때라든지 편리하네요. 프라모델로 비유하면, 색이 붙은 팔이라든지 다리라든지의 파트를 여러 곳에서 사용 돌리는 느낌. Sass 예를 들어, 자주 사용하는 컬러 코드를 정의하십시오. $sky-blue: #019bdf; .news_title_wrapper{ width: auto; h2 { color: $sky-blue; } .news_tag { background-color: $sky-blue; color: #ffffff; text-align: center; } * 정의한 변수를 호출할 수 있는 범위가 있으므로 조심하도록! ! 4. 연산 width에서 padding의 값을 빼면 행한 계산이 필요할 때 효과를 발휘합니다. 번거로운 계산을 처리해주는 것은 수수하게 기쁘네요. 예를 들어, 미리 변수와 연산 기능을 합치면 Sass Sass $news_contents_width: 570px; .news_items{ $padding: 20px; width: $news_contents_width -$padding *2: padding: 100px $padding: } CSS로 변환 (컴파일) CSS .news_items{ width: 530px: padding: 100px 20px: } 5.믹스 인

믹스 인 ( @mixin )이란?

스타일 모임을 정의하고 여러 곳에서 사용할 수 있는 기능.
인수도 지정할 수 있기 때문에 Sass 중에서도 강력한 기능. 버튼의 스타일이라든지 사용한다.
프라모델로 비유하면, 착색이라든지는 하지 않지만 대체로 완성된 건담같다. 인수의 지정으로 좋아하는 색이나 포즈의 커스터마이즈를 할 수 있다. 어쨌든 대단해.
@mixin에서 정의, @include [정의 이름]으로 호출

Sass

Sass

//定義
@mixin news_items($value){
    -moz-border-radius: $value;
    -webkit-border-radius: $value;
    border-radius: $value;
}
//呼び出し
.news_wrapper{
    @include news_items(30px);
    background-color: #333:
}
.item{
    @include news_items(100px 200px);
}

CSS로 변환 (컴파일)

CSS

.news_wrapper{
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    background-color: #333:
}
.item{
    -moz-border-radius: 100px 200px;
    -webkit-border-radius: 100px 200px;
    border-radius: 100px 200px;
}

요약

1. 기본 중첩
(HTML과 같은 트리 구조)
2. 부모 선택기 참조
(&, 의사요소라든지 사용)
3. 변수
(ex/$sky-blue: #019bdfV:)
4. 연산
(ex/-+*/)
5.믹스 인
( @mixin [정의 이름], @include [정의 이름])

모두 강력한 기능이며 나중에 변경하기에 강합니다.
CSS는 1부터 짜는 일도 있지만, 과거에 만든 것으로부터 파츠를 빌려 오는 경우도 있기 때문에 장기적으로 생각해 매우 효율적인 쓰는 방법이군요.
앞으로 점점 사용하고 싶네요!