23_10_20 CSS 공부정리

[코딩애플] 고급모듈

 

-Sass

 

1.css값을 변수에 저장 가능

2.값끼리 사칙연산가능(단위는 같아야함)

$main-color : #2a4cb2;

$기본사이즈 : 16px; //변수저장

.background {

    background-color: $main-color;

    font-size: $기본사이즈 - 2px; //사칙연산

}  

.box {

    color : $main-color;

    font-size : $기본사이즈 + 2px;

}

(참고1) SASS없이 그냥 CSS 파일에도 var() 이걸 이용해서 변수문법을 사용가능.

(참고2) 그냥 CSS 파일에서도 calc() 라는 함수를 이용하면 사칙연산을 사용가능.

 

 

-sass 파일과 scss 파일차이 : SASS 문법으로 코드짤 때 중괄호 생략이 가능

.box 
    font-size : 16px;

.main-bg 
    color : red

이렇게 짤 수 있음.

 

-nesting문법 : UI들을 한꺼번에 관리하기 좋은 문법

.navbar {

    ul {

      width : 100%;

    }

    li {

      color : black;

    }

  }

  /*위에건 SASS(nesting) 문법*/

 

  .navbar ul {

    width : 100%;

  }

  .navbar li {

    color : black;

  }

  /*밑에건 CSS 문법*/

 

 

-@extend 문법 : 이미 있는 클래스를 확장

@extend 그리고 복붙해야할 클래스 명을 뒤에 적어주면 됨

@extend를 사용하신 후 복붙할 클래스명을 뒤에 적으면 클래스명에 있던 모든 내용이 복붙됨

.btn {
  font-size : 16px;
  padding : 10px;
  background : grey;
}

.btn-green {
  @extend .btn;
  background : green;
}

*보통 비슷한 디자인의 요소들을 양산할 때 많이 사용합니다.

%box {

    width:200px;

    height: 200px;

    padding : 20px;

}

div.red {

    @extend %box;

    background-color: red;

}

div.green {

    @extend %box;

    background-color: green;

}

div.blue {

    @extend %box;

    background-color: blue;

}

-% 기호는 .대신 쓸 수 있는 임시클래스인데 CSS파일에서 클래스로 컴파일하지 않고싶을 때 쓰는 기호이다.

컴파일하고나면 %기호 안에 있는 것들은 사라짐.

 

-@mixin 문법 :  css 속성과 값들을 함수처럼 리팩토링 가능. 파라미터는 $를 붙여야함

@mixin 폰트스타일($구멍) {

    font-size : $구멍;

    letter-spacing: -1px;

}

h2 {

    @include 폰트스타일(30px);

}

h3 {

    @include 폰트스타일(20px);

}

h4 {

    @include 폰트스타일(10px);

}

 

h2 {

  font-size: 30px;

  letter-spacing: -1px;

}

h3 {

  font-size: 20px;

  letter-spacing: -1px;

}

h4 {

  font-size: 10px;

  letter-spacing: -1px;

-아래와 같이 속성( Properties )도 변수로 지정가능. #{파라미터}

@mixin 폰트스타일($구멍,$구멍2) {

    font-size : $구멍;

    #{$구멍2}: -1px;

}

h2 {

    @include 폰트스타일(30px,letter-spacing);

}

h3 {

    @include 폰트스타일(20px,letter-spacing);

}

h4 {

    @include 폰트스타일(10px,letter-spacing);

}

-다른 파일의 css 코드 가져오는 방법. 보통 확장자는 생략

@use 'reset(.scss)'

 

-컴파일 하기 싫은 파일은 _(언더바)를 파일명 앞에 붙임.

reset.css와 css.map이 생기지 않음

 

-다른 파일에서 사용한 변수, @mixin을 @use해서 사용가능

-(파일).$변수 / @include 파일명.믹스인이름();

@use 'reset';

h2 {

    color: reset.$메인칼라;

    @include reset.폰트스타일();

}

 

//_reset.scss

$메인칼라 : brown;

@mixin 폰트스타일() {

    height : 30px;

}

 

-@for 반복문

@mixin float() {

  float : left;

  padding : 15px;

  border : 1px solid black;

}

 

@for $i from 1 to 13{

  .col-#{$i}{

    @include float();

    width:(100%/(12/$i));

  }

} //scss @for반복문

 

 

 

.col-1 {

  float: left;

  padding: 15px;

  border: 1px solid black;

  width: 8.3333333333%;

}

 

//컴파일된 css코드

참고

https://abcdqbbq.tistory.com/83

[Sass 특징] @for 반복문