SASS 입문

프론트엔드/CSS

SASS 입문

syleemomo 2023. 7. 17. 11:10

728x90

https://seokzin.tistory.com/entry/SCSS-SCSS-%EB%AC%B8%EB%B2%95-%EC%A0%95%EB%A6%AC

[SCSS] SCSS 문법 정리

프로젝트 규모가 커지고 복잡해질수록 순수 CSS의 한계를 많이 느끼게 됩니다. 그래서 SCSS나 CSS-in-JS의 도입은 사실상 필수가 되었습니다. 이 글을 통해 CSS의 문제점을 개선한 SCSS에 대해 알아보

seokzin.tistory.com

7. 함수 (Function)

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>프로필 섹션 페이지</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="box_group">
      <div class="box1">박스 1</div>
      <div class="box2">박스 2</div>
      <div class="box3">박스 3</div>
    </div>
  </body>
</html>

$max-width: 100%;

// 부트스트랩 그리드 시스템처럼 12개의 컬럼 중에서 특정 비율만큼 가져감
@function columns($number: 1, $columns: 12){
  @return $max-width * ($number / $columns);
}

.box_group{
  width: $max-width;
  background-color: #eee;

  .box1{
    width: columns(); // col-1
    background-color: orange;
  }
  .box2{
    width: columns(8); // col-8
    background: red;
  }
  .box3{
    width: columns(3); // col-3
    background: blue;
  }
}

8. 조건(Condition)

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>프로필 섹션 페이지</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="box-1">박스 1</div>
    <div class="box-2">박스 2</div>
    <div class="box-3">박스 3</div>
    <div class="box-4">박스 4</div>
  </body>
</html>

$width-1: 555px;
$width-2: 700px;
$width-3: 250px;
$width-4: 70px;
$limit: 300px;

.box{
  &-1{
    width: if($width-1 > $limit, $width-1, 30px); // 555
    background: brown;
  }
  &-2{
    width: if($width-2 > $limit, $width-2, 30px); // 700
    background: yellow;
  }
  &-3{
    width: if($width-3 > $limit, $width-3, 30px); // 30
    background: green;
  }
  &-4{
    width: if($width-4 > $limit, $width-4, 30px); // 30
    background: pink;
  }
}

9. @if ~ @else if ~ @else 조건문

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>프로필 섹션 페이지</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="box-1">사과</div>
    <div class="box-2">바나나</div>
    <div class="box-3">망고</div>
    <div class="box-4">딸기</div>
  </body>
</html>

$color-1: "apple";
$color-2: "banana";
$color-3: "mango";
$color-4: "strawberry";

$width-1: 555px;
$width-2: 700px;
$width-3: 250px;
$width-4: 70px;
$limit: 300px;

@mixin selectColor($fruit){
  @if $fruit == "apple"{
    background-color: green;
  }@else if $fruit == "banana"{
    background-color: yellow;
  }@else if $fruit == "mango"{
    background-color: orange;
  }@else{
    background-color: red;
  }
}

.box{
  &-1{
    width: if($width-1 > $limit, $width-1, 30px); // 555
    @include selectColor($color-1);
  }
  &-2{
    width: if($width-2 > $limit, $width-2, 30px); // 700
    @include selectColor($color-2);
  }
  &-3{
    width: if($width-3 > $limit, $width-3, 30px); // 30
    @include selectColor($color-3);
  }
  &-4{
    width: if($width-4 > $limit, $width-4, 30px); // 30
    @include selectColor($color-4);
  }
}

10. @for 반복문

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>프로필 섹션 페이지</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <div class="through">박스 1</div>
    <div class="through">박스 2</div>
    <div class="through">박스 3</div>
    <div class="to">박스 4</div>
    <div class="to">박스 5</div>
  </body>
</html>

$mb: .2rem;
$default-width: 50px;
$default-color: #fff;

@for $i from 1 through 3{
  .through:nth-child(#{$i}){
    width: $default-width * $i;
    background-color: brown;
    color: $default-color;
    margin-bottom: $mb;
  }
}
@for $i from 4 to 6{
  .to:nth-child(#{$i}){
    width: $default-width * $i;
    background-color: skyblue;
    color: $default-color;
    margin-bottom: $mb;
  }
}

11. @each ~ in

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>프로필 섹션 페이지</title>
    <link rel="stylesheet" href="style.css">
  </head>
  
  <body>
    <div class="puma-icon">박스 1</div>
    <div class="sea-slug-icon">박스 2</div>
    <div class="egret-icon">박스 3</div>
    <div class="salamander-icon">박스 4</div>
    <h1>큰 글씨</h1>
    <h2>중간 글씨</h2>
    <h3>작은 글씨</h3>
  </body>
</html>

// List 
@each $animal in puma, sea-slug, egret, salamander{
  .#{$animal}-icon{
    background-image: url(images/#{$animal}.jpg);
    width: 20%; height: 300px;
    background-size: cover;
    background-position: center;
  }
}

// Map 
@each $key, $value in (h1: 2rem, h2: 1.5rem, h3: 1.2rem){
  #{$key}{
    font-size: $value;
  }
}

728x90

저작자표시 비영리 변경금지 (새창열림)