scss

css와 scss차이

scss : css 전처리기> css의 부족한 점을 메워줄 수 있다

css에서는 이렇게 일일이 경로를 적어줘야 했지만

nav ul {margin: 0; padding: 0; list-style: none; }
nav li {display: inline-block;}
nav a { display: block; padding: 6px 12px; text-decoration: none;}

scss에서는 코드가 중첩되기 때문에 중복되는 코드가 적어진다.

nav {
	ul {
    	margin: 0;
    	padding: 0;
    	list-style: none;}
  	li { display: inline-block; }
  	a {
    	display: block;
    		padding: 6px 12px;
    text-decoration: none;} } 

이렇게 {}를 이용하여 중첩할 수 있음.

css에서는

a:hover{color:pink}

로 썼어야 했지만 scss에서는

a{
  &:hover {
    color :color:pink;}

이렇게 중첩하는 방식으로 활용가능! 부모선택자 참조 선택해서 가상클래스나 가상요소를 중첩시킬 때는 & 기호를 사용한다.

• .scss파일을 만들고 저장하면 자동으로 css파일과 css map 생긴다 (만들기 싫으면 앞에 _ 붙여주기)

변수선언

$size-long : 100px; 
$size-small : 50px;
$f-color : #fff;
$br-5: 5px; 

이렇게 앞에 $를 붙여서 변수 선언 가능
scss 파일에

.box{
  width: $size-long;
  height: $size-small;
  color: #fff;
  border-radius: $br-5; }

이렇게 기입하면 자동으로 css 파일에도 기입된다.

$font-size: 20px
.inner {
  font-size : $font-size  + 2px;  <연산도 된다

@extend

.box1{
@extend .box; 
background-color: red;

클래스 확장시 @extend 붙이고 뒤에 클래스 이름(.box) 을 쓴다.

@use - 다른 파일 불러오기

@mixin

  @mixin mixin이름 {코드}

이 기본형이고

@mixin mixin이름(value1,value2) {
// code}

함수처럼 ()안에 인자를 정의할 수 있다.

mixin은 @include로 사용 @include mixin이름;
인자 있으면 @include mixin이름(value1,value2)

@mixin border-radius($radius) {
    width: 200px ;
    height: 200px;
    font-size: 16px;
    border-radius : $radius}

라고 하고

.box1{@include border-radius(20px)}
.box2{@include border-radius(40px)}
.box3{@include border-radius(50%)}

요런식으로 다른 값은 다 똑같지만 특정 값만 속성 다르게 줄수있다~

$font-base : 15px;
$font-family-base : 'Smooch';

mixin활용

@mixin font-default {
        font-family: $font-family-base;
        font-weight: 400;
        color : #222

@mixin lg-text{
@include font-default;
font-size : $font-base * 4;
color: crimson;}

h1{@include lg-text;}

이렇게 선언한 mixin도 활용 가능