scss
-
Sass(SCSS) InterpolationCSS Preproseccor/Sass 2019. 5. 6. 19:32
보간법(Interpolation) Sass 스타일시트의 거의 모든 위치에서 보간법을 사용할 수 있습니다. ${} * 스타일 규칙의 선택자 (Selectors in style rules) * 속성 이름 (Property names in declarations) * 사용자 지정 속성 값 (Custom property values) * CSS at-rules * @extend * 일반 CSS @import * 인용된 문자열 및 인용되지 않은 문자열 (Quoted or unquoted strings) * 함수 (Special functions) * 일반 CSS 함수 이름 (Plain CSS function names) * 주석 (Loud comments) SCSS @mixin corner-icon($name, ..
-
Sass(SCSS) VariablesCSS Preproseccor/Sass 2019. 5. 6. 19:11
변수(Variables) Sass 변수는 간단합니다. $로 시작하는 이름에 값을 할당하면 값 자체가 아니라 해당 이름을 참조할 수 있습니다. 변수는 반복을 줄이고 복잡한 계산을 하고 라이브러리를 구성하는 등의 작업을 가능하게 합니다. // 변수 선언 : SCSS $base-color: #c6538c; $border-dark: rgba($base-color, 0.88); .alert { border: 1px solid $border-dark; } CSS .alert { border: 1px solid rgba(198, 83, 140, 0.88); } 기본값(Default Values) Sass에는 !default 플래그를 제공하는데, 변수가 정의되지 않았거나 값이 null인 경우에만 변수에 값을 할당하게 ..
-
Sass(SCSS) At-Rules #5[@for and @while]CSS Preproseccor/Sass 2019. 5. 5. 21:35
@for // 구문 @for from to {...} @for from through {...} 어떤 숫자에 대해 위아래도 카운트 하면서 각 숫자에 대한 블록을 평가합니다. 위 for 구문 중 to를 사용하면 최종 숫자는 제외되고 through를 사용하면 포함됩니다. SCSS @for $i from 1 through 3 { ul:nth-child(3n + #{$i}) { background-color: lighten($base-color, $i * 5%); } } CSS ul:nth-child(3n + 1) { background-color: #004080; } ul:nth-child(3n + 2) { background-color: #004d99; } ul:nth-child(3n + 3) { backg..
-
Sass(SCSS) At-Rules #5[@each]CSS Preproseccor/Sass 2019. 5. 5. 19:45
@each // 구문 @each in {...} 블록은 지정된 변수 이름에 할당된 목록의 각 요소에 대해 차례로 평가된다. SCSS $sizes: 40px, 50px, 80px; @each $size in $sizes { .icon-#{$size} { font-size: $size; height: $size; width: $size; } } CSS .icon-40px { font-size: 40px; height: 40px; width: 40px; } .icon-50px { font-size: 50px; height: 50px; width: 50px; } .icon-80px { font-size: 80px; height: 80px; width: 80px; } with maps @each를 사용하여 mam..
-
Sass(SCSS) At-Rules #5[@if and @else]CSS Preproseccor/Sass 2019. 5. 5. 18:56
@if and @else // @if 구문 @if { ... } @if는 위와 같이 쓰입니다. 표현식은 대개 참 또는 거짓 중 하나로 평가되고, 평가되어 반환되는 값에 따라 블록의 평가여부가 결정됩니다. SCSS @mixin avatar($size, $circle: false) { width: $size; height: $size; @if $circle { border-radius: $size / 2; } } .square-av { @include avatar(100px, $circle: false); } .circle-av { @include avatar(100px, $circle: true); } CSS .square-av { width: 100px; height: 100px; } .c..
-
Sass(SCSS) At-Rules #4[@extend]CSS Preproseccor/Sass 2019. 5. 5. 18:24
Extend 어떤 특정한 클래스는 다른 클래스의 모든 스타일과 자신의 특정한 스타일을 가져야하는 경우가 있습니다. 예를들어 BEM 방법론(methodology)은 블록(Block) 또는 요소(Element) 클래스와 동일한 요소에 적용되는 수정자 클래스를 권장합니다. 하지만 이것은 복잡한 HTML을 만들 수 있고 두 클래스를 모두 포함하는 것을 잊어버리는 실수를 범하기 쉽습니다. 또한 마크업에 비의미론적인 스타일 문제를 가져올 수 있습니다. HTML Markup Oh no! You've been hacked! CSS .error { border: 1px #f00; background-color: #fdd; } .error--serious { border-width: 3px; } Sass의 @ext..
-
Sass(SCSS) At-Rules #3[@function]CSS Preproseccor/Sass 2019. 4. 29. 15:50
함수(function) 함수를 사용하면 스타일시트 전체에서 재사용할 수 있는 SassScript 값에 대한 복잡한 연산을 정의할 수 있습니다. function 구문 @function (){...} 함수(function)은 유니버셜 명령문 뿐만 아니라 함수 호출의 결과로 사용할 값을 나타내는 return문도 포함할 수 있습니다. 함수는 일반적인 CSS 함수 구문을 사용하여 호출합니다. Scss // 함수 정의 @function pow($base, $exponent) { $result: 1; @for $_ from 1 through $exponent { $result: $result * $base; } @return $result; } .sidebar { float: left; // 함수 호출 margin-..
-
Sass(SCSS) At-Rules #2[@mixin & @includes]CSS Preproseccor/Sass 2019. 4. 29. 13:10
Mixin Mixins을 사용하면 스타일시트 전체에서 재사용할 수 있는 스타일을 정의할 수 있습니다. mixins 문법 // mixin 정의 @mixin (){...} // include @include @include () Scss @mixin reset-list { margin: 0; padding: 0; list-style: none; } @mixin horizontal-list { @include reset-list; li { display: inline-block; margin: { left: -2px; right: 2em; } } } nav ul { @include horizontal-list; } CSS nav ul { margin: 0; padding: 0; list-style: none;..