본문 바로가기

프론트엔드 공부/scss

 (10)
scss each in문(list, map) //scss는 자바스크립트와 유사하게 number,string,boolean,color,list(배열),map(object개념) 이라는 개념들을 사용가능 //scss $number :1; $string:bold; $color: red; $boolean: true; $null : null; $list : orange, royalblue, yellow; $map: ( o:orange, r:royalblue, y:yellow); @each $c in $list{ .listbox{ color:$c; } } @each $k, $v in $map{ .mapbox-#{$k}{ color:$v; } } //css .listbox { color: orange; } .listbox { color: royalblue; } ..
scss @import 파일가져오기 / css > scss 변경(parcel bundler)과 url 리팩토링 **@import 3가지 방식 // @import url("./sub.scss"); // @import "./sub.scss"; //scss는 다른 scss 파일 가져올때 url 제거가능, 여러개의 scss 가져올때 확장자 제거가능 @import "./sub","./sub2"; $color: royalblue; .container{ h1 { color:$color; } } *** css 파일을 scss로 변경 후 리팩토링 진행(parcel bundler 설치) 해당 폴더에 접속 > 터미널에서 npm init -y 입력 >npm i-D parcel bundler (package.json에 parcel 번들러 깔려있는지 확인, css 파일을 scss 파일로 변경,html 연결 확장자 변경, package.j..
scss 컬러내장함수 .box{ $color:royalblue; width:200px; height:200px; margin:20px; border-radius:10px; background-color:$color; &.built-in{ background-color:lighten($color,10%); &:hover{ background:darken($color,10%); } } &.built-in2{ background-color:mix($color,red); &:hover{ background:grayscale($color); } } } //saturte,grayscale,desaturate,lighten,darken,invert,rgba($color,0.5)..
scss @function(){} //@mixin은 해당 정보를 묶어놓는 모음집 //function은 기존 자바스크립트와 더 유사하게 //사용, 연산기능 @mixin center{ display:flex; justify:center; } @function ratio($size, $ratio){ @return $size * $ratio } .box{ $width:160px; width:$width; height:ratio($width, 9/16); @include center; }
scss 반복문(for $i from 1 from n){} //scss 반복문 //for(let i=0; i
scss @mixin의 재활용(초깃값 설정과 키워드인수설정) / @content 추가기능 /*재활용 mixin*/ /*mixin A()는 객체 변수할당과 동일 ()안에 매개변수를 넣어줄수 있고, 초깃값을 설정 가능 */ //scss @mixin box($size:100px,$color:tomato){ width:$size; height:$size; background-color:$color; @content; } .container{ @include box(200px,red); .item{ /*키워드인수-인수의값이 해당키워드로 직접 들어감*/ @include box($color:green); } } .box2{ @include box{ /*content기능*/ bottom:0; left:0; margin:auto; } } //css @charset "UTF-8"; /*재활용 mixin*/ /..
scss 산술연산자 나눗셈의 경우 단축속성의 의미를 가지고 있어 scss에서는 괄호로 묶어 주어야 적용 가능 /*산술연산자*/ div{ $size:30px; width:20px + 20px; height:40px - 10px; font-size:10px *2; /* margin:(30px/2);*/ margin:$size/2; padding:20px %7; } span{ /* font-size:10px; line-height:10px; font-family:serif; */ //위 font의 단축속성 개념때문에 나누기 연산자가 적용되지x //font 속성작성시 family도 같이 작성해주어야함 font:10px/ 10px serif; }
scss 변수 유효범위 /*변수의 유효범위*/ $_size: 100px;//전역변수 .container{ $size:200px; position:fixed; top:$size; .item{ width:$size; height:$size; } } .box{ $_size:300px;//let과 개념이 비슷하여 값이 변경됌 //transform:$size; /*에러 : 중괄호안에서만 유효하며, 전역변수일경우 모두 사요가능*/ width:$_size; } .box2{ height:$_size; }

티스토리툴바