html

htmi>sass 문법2. 가변성 mixin, use. _scss

연습노트 2024. 7. 10. 18:31

Sass 문법 4. 코드를 한단어로 축약하는 @mixin

 

저번 시간에 배운 변수랑 매우 유사합니다.

변수는 짧은 값 하나만 저장해서 쓸 수 있는 문법이었는데 

@mixin은 스타일 여러줄을 한 단어로 치환해서 사용가능합니다. 

 

설명하다
 
@mixin 버튼기본디자인() {
  font-size : 16px;
  padding : 10px;
}

.btn-green {
  @include 버튼기본디자인();
  background : green;
}

1. @mixin이라고 쓰고,

2. 이름을 하나 지어주고 ( ){ } 붙이고,

3. 한 단어로 치환할 값들을 중괄호 안에 쭉 나열하시면 됩니다.

그럼 이제 밑에서 자유롭게 @include mixin이름 으로 사용하면 mixin 안에 있던 코드가 그 자리에 복붙됩니다.

아무튼 여러줄을 한 단어로 치환해서 쓰고싶을 때 쓰는 문법이 바로 @mixin 입니다. 

 

 

 

 

얼핏 보면 mixin과 extend 문법은 유사하지 않습니까.

제가보기엔 거의 똑같습니다. extend가 약간 더 쓰기 편하다는 장점이 있는거 말곤요.

근데 mixin만의 장점이 하나 있는데, 바로 내부에 묶어둔 속성들에 구멍을 하나 뿅 뚫어줄 수 있다는겁니다.

 

 

설명하다
 
@mixin 버튼기본디자인($구멍) {
  font-size : 16px;
  padding : 10px;
  background : $구멍;
}

소괄호의 역할이 바로 구멍인데,

이제 버튼기본디자인()이라는 단어를 사용하실 때 소괄호구멍 안에 아무거나 값을 집어넣을 수 있습니다.

구멍에 뭘 넣으면 어떻게되냐고요?

저기 background : 옆에있는 또 하나의 구멍 보이시죠? 저기로로 슈웅~하고 들어갑니다.

 

버튼기본디자인(바보) 이렇게 쓰시면

바보라는 글자가 숑~하고 들어와서 background : 바보가 되는겁니다.

 

 

 

설명하다
 
@mixin 버튼기본디자인($구멍) {
  font-size : 16px;
  padding : 10px;
  background : $구멍;
}

.btn-green {
  @include 버튼기본디자인(#229f72);
}

코드를 이렇게 짜놓으면

.btn-green 이라는 클래스는 안에 어떤 내용으로 채워질까요?

뭐가 채워질까요

font-size : 16px;

padding : 10px;

background : #229f72;

이렇게 되지 않을까요

[collapse]

 

그럼 응용하면 btn-green 말고도 파란버튼, 빨간버튼 자유자재로 만드실 수 있겠죠.

이것이 mixin의 장점이라고 보시면 됩니다.

1. 긴 코드를 한 단어로 축약할 수도 있고

2. 코드내부에 구멍을 뚫어 사용할 때마다 각각 다른 내용을 집어넣을 수 있습니다.

 

@mixin 폰트스타일($구멍, $구멍2) {
  font-size: $구멍;
  #{ $구멍2 }: -1px;
}

h2 {
  @include 폰트스타일(40px, width);
}

 

 

 

 

Sass 문법 5. @use와 언더바 파일

 

CSS파일마다 맨위에 첨부하는 reset같은걸 자주 복붙하는 분들은

import문법을 사용하시길 바랍니다.

복붙시간을 줄여줄 수 있습니다.

 

 

@use 'reset.scss';

이러면 reset.scss 파일을 해당 SCSS파일에 전부 복붙할 수 있습니다.

파일이 다른 폴더 안에 있다면 '폴더명/reset.scss' 이런 식으로 경로를 잘 써주시면 됩니다.  

 

 

@use '_reset.scss';

scss 파일명을 작명할 때 언더바를 파일명 맨 앞에 붙이는 경우가 있습니다.

언더바 _기호를 파일명 맨앞에 사용하시면 "이 파일은 CSS파일로 따로 컴파일하지 말아주세요" 라는 의미입니다.

그냥 첨부용 파일이라는 것이지요.

 

 

 

 

@use '_reset.scss';

reset.$변수명;  /* 다른 파일의 변수쓰는법 */
@include reset.mixin이름();  /* 다른 파일의 mixin쓰는법 */

@use 해온 다른 파일에 있던 $변수와 @mixin을 가져다 쓸 수도 있습니다.

이 경우엔 그냥 쓰는게 아니라 꼭 파일명을 앞에 붙여야합니다. 

 

 

 

응용하면 다른 파일에서 자주 사용할법한 _button.scss _navbar.scss 이런 파일들을 미리 다 만들어놓고

멋지게 첨부식으로 CSS를 개발할 수 있습니다.

항상 @use 사용할 땐 파일 경로만 조심하면 되겠습니다.

 

<body>
    <ul  class="test_nar">
        <div class="nar_box">
        <li class="active">Cras Justo odio</li>
        <li>Dapibus ac facilisis in</li>
        <li>Morbi leo risus</li>
    </div>
    </ul>

    <div class="nar_container">
        <p class="list_1">well done! sdfsdfsdfdf</p>
        <p class="list_2">Heads up! sdf sdffsdf</p>
        <p class="list_3">Warning! sfdgfdgfdgsfg</p>
    </div>

    <div class="row">
        <div class="col-6"> 이렇게 사용하면 </div>
        <div class="col-6"> 가로폭이 2등분됩니다. </div>
      </div>
      <div class="row">
        <div class="col-md-4 col-12"> 이렇게 사용하면 </div>
        <div class="col-md-4 col-12"> 가로폭이 </div>
        <div class="col-md-4 col-12"> 3등분됩니다. </div>
        <div class="col-3"> 이렇게 사용하면 </div>
        <div class="col-3"> 가로폭이 </div>
        <div class="col-3"> 3등분됩니다. </div>
        <div class="col-3"> 3등분됩니다. </div>
      </div>
--------------------------------------------------------------------------------
$메인색상 : #2a4c6e;
$서브색상 : #eeeeee;
$기본사이즈 : 16px;


%btn {
  width: 100px;
  height: 100px;
  padding: 20px;
}

@mixin 폰트스타일($구멍, $구멍2) {
  font-size: $구멍;
  #{ $구멍2 }: -1px;
}

.test_nar {
 
  .active{
    background-color: #89c0f7;
  }

  li {
    list-style-type: none;
    color : black;
    width: 500px;
    height: 50px;
    border : 1px solid lightgray;
    font-size: 20px;
    margin: 0;
    padding: 10px;
 
   
  }

}

.background {
  background-color: $메인색상;
  font-size: ($기본사이즈/2);
}
.box {
  background-color: $서브색상;  
  font-size : $기본사이즈 + 2px;
  width : (100px * 2);
  height : (300px / 3)
 
}

.nar_container {
  margin-left : 30px ;
  p{
    list-style-type: none;
    color : black;
    width: 500px;
    height: 50px;
    border : 1px solid lightgray;
    font-size: 20px;
    padding: 10px;
    border-radius: 5px;
  }

  @mixin 폰트스타일($구멍, $구멍2) {
    background-color: $구멍;
    color: $구멍2;
  }
  .list_1{
    @include 폰트스타일( rgb(208, 236, 213),green)
  }
  .list_2{
    @include 폰트스타일(#afb0fd,blue)
  }
  .list_3{
    @include 폰트스타일(rgba(238, 255, 170, 0.799),rgb(104, 107, 57))
  }
}

@mixin f_row($구멍) {
  width: $구멍;
    color : black;
    height: 50px;
    border : 1px solid lightgray;
    font-size: 20px;
    padding: 10px;
    border-radius: 5px;
    width: col-md-6;
  }


.row{
 
  .col-6{
    @include f_row(50%)
  }
  .col-4{
    @include f_row(33.33%)
  }
  .col-3{
    @include f_row(25%)
  }
}

'html' 카테고리의 다른 글

html> transform & animation 으로 매끄러운 애니메이션 만들기  (0) 2024.07.11
html>HTML video, audio 다루기  (0) 2024.07.10
html>Sass 기초 1편 : 셋팅 & Nesting &extend  (0) 2024.07.10
Html>숨겨진 코드 : Shadow DOM  (0) 2024.07.10
HTML> Pseudo-element  (0) 2024.07.10

'html'의 다른글

  • 현재글htmi>sass 문법2. 가변성 mixin, use. _scss

관련글

티스토리툴바