데브코스-til-css심화2

다중선택자

ul, ol{
    li, sapn{
        width: 100px;
        color: red;
    }
}

변수 선언&& 사용

$size: 100;
$src: "assets/log.jpg";
$color-blue: royalblue;
$color-gray: #333;
$w: 100px;

.box-a {
    width: $w;
}

//numbers
$number1: 1;
$number2: .82;
$number3: 20px;
$number4: 2fr;
//Strings
$string1: blod;
$string2: absolute;
$string3: "assets/images/";

//colors
$color1: blue;
$color2: yellowgreen;
$color3: rgba(255,0,0,.5);
$color4: #ffff00;

//Booleans
$boolean1:true;
$boolean2:false;

//Null
$null: null;

//List
$list1:(10px, 20px, 30px);
$list2: 10px, 20px, 30px ;
$list3: 10px 20px 30px;
$list1: apple, banana, cherry;

//Maps
//{key: value}
$map1: ( key: value);
$map2: ( a: apple, b: bananac, c: cherry);

.box {
    $a: 20px;
    width: 100px + 200px;
    height: 200px - 50px;
    margin: 200px * 2;
    opacity: 10 % 3;
    top: 20px / 2; //안됨
    top: (20px / 2); //됨
    top: $a / 2; //됨
    left: calc(100% - 50px); //연산단위가 다르면 calc
    
}

비교 연산자

.box {
$w:100px; @if($ != 100px){
width: $w;
} @else{
width: 200px;
}
}

//비교 연산자
// and or not
.box {
$w: 100px;
$h: 200px;
$b: false;
@if(not $b and $h> 100px){
width: $w;
} @else{
width: 200px;
}
}