SASS (SCSS)와 BEM 이야기
말하고 싶은 것
이제 CSS를 편리하게 활용하기 위해 SCSS와 BEM 기법을 활용해 보자.
sass, scss란?
//CSS
.btn {
display: block;
}
.btn span {
display: inline-block;
}
//SASS
.btn
display: block
span
display: inline-block
//SCSS
.btn {
display: block;
span {
display: inline-block;
}
}
최근 트렌드
SCSS의 장점과 사용 예
장점
사용 예
지금까지, 이런 느낌으로 쓰고 있었지만,,,
.primaryBtn {
padding: 12px;
color: #fff;
background-color: #01a2c1;
}
.dangerBtn {
padding: 12px;
color: #fff;
background-color: #fc0349;
}
.primaryBtn--big {
padding: 12px;
color: #fff;
background-color: #01a2c1;
font-size: 30px;
}
//色を変数化
$primary: #01a2c1;
$danger: #fc0349;
$white: #fff;
@mixin btn {
padding: 12px;
color: $white;
}
.primaryBtn {
@include btn;
background-color: $primary;
}
.dangerBtn {
@include btn;
background-color: $danger;
}
.primaryBtn__big {
@extend .primaryBtn; // 既存のクラスを呼び出し
font-size: 30px; // ここだけ変更
}
참조: SCSS를 사용해 봅시다.
htps //w w. 헹구어서 r. 코m/
참조:SCSS로 할 수 있는 일
htps : // m / TD3P / ms / 24 A 4773 df0c2 48
BEM이란?
block {}
block__element {}
block__element--modifier {}
monster {}
monster__slime {}
monster__slime--ぶち {}
monster__slime--ホイミ {}
이미지
활용 사례
See the Pen BEM by Tadatsugu Sampei ( @ 다다 츠구 사 mpei )
on CodePen .
<body>
<section class="main">
<div class="main__textArea">
<p>Hello! SCSS&BEM!</p>
</div>
<div class="main__btn--success">
早速使ってみる
</div>
<div class="main__btn--faile">
遠慮しておく
</div>
</section>
</body>
<style>
@mixin btn {
text-align: center;
margin: 20px 40px;
padding: 20px;
color: #fff;
}
.main{
background-color: #c2ffea;
padding: 100px;
&__textArea {
text-align: center;
margin: 40px;
padding: 40px;
background-color: #fff;
}
&__btn{
&--success {
@include btn;
background-color: #0a7bf5;
}
&--faile {
@include btn;
background-color: #808080;
}
}
}
</style>
참조
- [BEM설계] 와우아아아삼(卍^o^) 덥지 않아야 하는 BEM의 쓰는 법을 와이어프레임으로 정리한다
- htps //w w. 에ゔぉ를 rx. 이. jp/bぉg/헛 s-s dy/
Reference
이 문제에 관하여(SASS (SCSS)와 BEM 이야기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/pe-ta/items/67d0e3a72f30e9dda59c
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<body>
<section class="main">
<div class="main__textArea">
<p>Hello! SCSS&BEM!</p>
</div>
<div class="main__btn--success">
早速使ってみる
</div>
<div class="main__btn--faile">
遠慮しておく
</div>
</section>
</body>
<style>
@mixin btn {
text-align: center;
margin: 20px 40px;
padding: 20px;
color: #fff;
}
.main{
background-color: #c2ffea;
padding: 100px;
&__textArea {
text-align: center;
margin: 40px;
padding: 40px;
background-color: #fff;
}
&__btn{
&--success {
@include btn;
background-color: #0a7bf5;
}
&--faile {
@include btn;
background-color: #808080;
}
}
}
</style>
- [BEM설계] 와우아아아삼(卍^o^) 덥지 않아야 하는 BEM의 쓰는 법을 와이어프레임으로 정리한다
- htps //w w. 에ゔぉ를 rx. 이. jp/bぉg/헛 s-s dy/
Reference
이 문제에 관하여(SASS (SCSS)와 BEM 이야기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/pe-ta/items/67d0e3a72f30e9dda59c텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
