Sass의 mixin을 이용한 반응성
Sass 도입
CSS에도 익숙해졌지만
끈적 끈적한 글씨가 너무 끔찍하고 눈에 띄지 않습니다.
어느 정도 섹션마다 나누어 쓰고 있었지만 위와 같은 문제를 빨리 해결해 두고 싶다고 생각했습니다.
거기서 잘 듣는 Sass는 아무래도 이러한 문제를 해결해 주는 지금을 설레는 CSS라든지.
Sass에는 「Sass」와 「SCSS」의 2종류의 기법이 있습니다만 SCSS의 쓰는 법이 일반적이라고의 일이었기 때문에 조속히 도입했습니다.
이번은 1번 이해가 어려웠던 반응형화에 대해 포커스해 써 보았습니다.
mixin으로 화면 상태를 저장하고 사용
SCSS의 미세한 기법은 두어
@mixinでスタイルをあらかじめ作っておいて@includeで呼び出して使いまわせる
라는 강력한 능력이 있습니다.
SCSS의 중첩으로 기술을 할 수 있다는 특징과 조합하면 미디어 쿼리가 간단하고 가독성이 높은 만드는 방법이 가능하다.
↓이미지↓
style.scss@mixin lg {
//画面サイズがlg以下を意味する記述をする//
}
@mixin md {
//画面サイズがmd以下を意味する記述をする//
}
@mixin sm {
//画面サイズがsm以下を意味する記述をする//
}
p{
color: black;
@include lg{
color: red;
@include md{
color: blue;
@include sm{
color: green;
}
}
}
}
이것만의 설명으로
lg사이즈 이상에서는 흑색
lg사이즈 이하에서는 적색
md사이즈 이하에서는 청색
sm사이즈 이하에서는 녹색
라는 반응형화가 가능합니다.
mixin의 기술 방법
그럼 중요한 mixin 내용은 어때요.
먼저 키와 중단점 값으로 구성된 변수를 정의합니다.
style.scss$breakpoints : (
"lg":"screen and (max-width:1024px)",
"md":"screen and (max-width:768px)",
"sm":"screen and (max-width:480px)"
);
이것으로lgのキーは１０２４px以下mdのキーは７６８px以下smのキーは４８０px以下라고 정의할 수 있었습니다.
한편 mixin은 어떻게 쓰는가 하면
style.scss@mixin mq($breakpoint:md){
@media #{map-get($breakpoints, $breakpoint)}{
@content;
}
}
mq라는 mixin의 인수에 상기 설정한 변수의 키를 넣어 미디어 쿼리의 처리를 시킨다.
뭐＠content라든지 map-get라든지, 제대로 이해는 하지 않습니다.
코피페는 강하다!
덧붙여서 인수내의 $breakpoint:md (은)는 인수의 초기치를 md (으)로 설정하는 것 때문에.
실제로 사용해보기
실제로 사용하면 어떻게 될까.
index.html<body>
<div class="box red">
<p>1028px以下で丸に変形</p>
<p>７６８px以下で非表示</p>
</div>
<div class="box blue">
<p>768px以下で拡大</p>
<p>４８０px以下で非表示</p>
</div>
<div class="box green">
<p>480px以下で縮小</p>
</div>
</body>
위 html에 대해 설명하는 scss는
style.scss.red{
background-color: red;
@include mq(lg){
border-radius: 50%;
@include mq(){
display: none;
}
}
}
.blue{
background-color: blue;
@include mq(){
height: 400px;
width: 400px;
@include mq(sm){
display: none;
}
}
}
.green{
background-color: green;
@include mq(sm){
height: 100px;
width: 100px;
}
}
결과 이런 움직임을 합니다.
결론
편리! !
결론
개인적으로 쉽게하기 때문에 max-width로 지정하십시오.
〇〇 이하일 때 어때?
같은 글을 쓰고 있었지만,
다양한 사이트를 참고로 하면 min-width를 이용하고 있는 것이 많았습니다.
모바일 퍼스트를 의식한다면 〇〇 이상의 때~의 쓰는 방법에 익숙해져야 합니다.
Reference
이 문제에 관하여(Sass의 mixin을 이용한 반응성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kokitanshio/items/819b4016aecf7a795009
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
@mixin lg {
//画面サイズがlg以下を意味する記述をする//
}
@mixin md {
//画面サイズがmd以下を意味する記述をする//
}
@mixin sm {
//画面サイズがsm以下を意味する記述をする//
}
p{
color: black;
@include lg{
color: red;
@include md{
color: blue;
@include sm{
color: green;
}
}
}
}
그럼 중요한 mixin 내용은 어때요.
먼저 키와 중단점 값으로 구성된 변수를 정의합니다.
style.scss
$breakpoints : (
"lg":"screen and (max-width:1024px)",
"md":"screen and (max-width:768px)",
"sm":"screen and (max-width:480px)"
);
이것으로
lgのキーは１０２４px以下mdのキーは７６８px以下smのキーは４８０px以下라고 정의할 수 있었습니다.한편 mixin은 어떻게 쓰는가 하면
style.scss
@mixin mq($breakpoint:md){
@media #{map-get($breakpoints, $breakpoint)}{
@content;
}
}
mq라는 mixin의 인수에 상기 설정한 변수의 키를 넣어 미디어 쿼리의 처리를 시킨다.
뭐＠content라든지 map-get라든지, 제대로 이해는 하지 않습니다.
코피페는 강하다!
덧붙여서 인수내의
$breakpoint:md (은)는 인수의 초기치를 md (으)로 설정하는 것 때문에.실제로 사용해보기
실제로 사용하면 어떻게 될까.
index.html<body>
<div class="box red">
<p>1028px以下で丸に変形</p>
<p>７６８px以下で非表示</p>
</div>
<div class="box blue">
<p>768px以下で拡大</p>
<p>４８０px以下で非表示</p>
</div>
<div class="box green">
<p>480px以下で縮小</p>
</div>
</body>
위 html에 대해 설명하는 scss는
style.scss.red{
background-color: red;
@include mq(lg){
border-radius: 50%;
@include mq(){
display: none;
}
}
}
.blue{
background-color: blue;
@include mq(){
height: 400px;
width: 400px;
@include mq(sm){
display: none;
}
}
}
.green{
background-color: green;
@include mq(sm){
height: 100px;
width: 100px;
}
}
결과 이런 움직임을 합니다.
결론
편리! !
결론
개인적으로 쉽게하기 때문에 max-width로 지정하십시오.
〇〇 이하일 때 어때?
같은 글을 쓰고 있었지만,
다양한 사이트를 참고로 하면 min-width를 이용하고 있는 것이 많았습니다.
모바일 퍼스트를 의식한다면 〇〇 이상의 때~의 쓰는 방법에 익숙해져야 합니다.
Reference
이 문제에 관하여(Sass의 mixin을 이용한 반응성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kokitanshio/items/819b4016aecf7a795009
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<body>
<div class="box red">
<p>1028px以下で丸に変形</p>
<p>７６８px以下で非表示</p>
</div>
<div class="box blue">
<p>768px以下で拡大</p>
<p>４８０px以下で非表示</p>
</div>
<div class="box green">
<p>480px以下で縮小</p>
</div>
</body>
.red{
background-color: red;
@include mq(lg){
border-radius: 50%;
@include mq(){
display: none;
}
}
}
.blue{
background-color: blue;
@include mq(){
height: 400px;
width: 400px;
@include mq(sm){
display: none;
}
}
}
.green{
background-color: green;
@include mq(sm){
height: 100px;
width: 100px;
}
}
편리! !
결론
개인적으로 쉽게하기 때문에 max-width로 지정하십시오.
〇〇 이하일 때 어때?
같은 글을 쓰고 있었지만,
다양한 사이트를 참고로 하면 min-width를 이용하고 있는 것이 많았습니다.
모바일 퍼스트를 의식한다면 〇〇 이상의 때~의 쓰는 방법에 익숙해져야 합니다.
Reference
이 문제에 관하여(Sass의 mixin을 이용한 반응성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/kokitanshio/items/819b4016aecf7a795009
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Sass의 mixin을 이용한 반응성), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/kokitanshio/items/819b4016aecf7a795009텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
