연습장

설치 $ npm install -g sass  버전확인 $ sass --version  트랜스파일링(컴파일) $ sass src/sass:dist/css package.json 사용시  "scripts": {    "build:sass": "sass --style compressed src/sass:dist/css",  }, 변수$변수명$변수명 : 값  !global  // 전역변수로 바꿀때$변수명 : 값  !default // 초기값 Interpolation #{$변수명}   // 변수의 값을 문자열로 삽입 Ampersand &:hover // &는 부모요소를 참조하는 셀렉터이다.  Nesting // 선언을 중첩#navbar{    ul{        li{            ...        }..

https://poiemaweb.com/sass-webpack Webpack + Sass | PoiemaWeb poiemaweb.com 기존{  "name": "sass-study",  "version": "1.0.0",  "main": "index.js",  "scripts": {    "build:sass": "sass --style compressed src/sass:dist/css"  },  "keywords": [],  "author": "",  "license": "ISC",  "description": ""} 설치 bash$ npm install --save-dev webpack webpack-cli css-loader sass sass-loader mini-css-extract-plugin..

https://poiemaweb.com/sass-built-in-function Sass - Built-in Function | PoiemaWeb poiemaweb.com https://sass-lang.com/documentation/modules/ Sass: Built-In ModulesCompatibility: Dart Sass since 1.23.0 LibSass ✗ Ruby Sass ✗ Only Dart Sass currently supports loading built-in modules with @use. Users of other implementations must call functions using their global names instead. Sass provides many b..

https://poiemaweb.com/sass-css-extention Sass - CSS Extensions | PoiemaWebSass의 유용한 확장 기능으로 선언을 중첩(nesting)하는 것이다. CSS는 후손 셀렉터(Descendant Combinator)의 경우, 부모요소를 기술하여야 한다.poiemaweb.com  1. Nesting 선언을 중첩(nesting)하는 것이다. CSS는 후손 셀렉터(Descendant combinator)의 경우 부모요소를 기술하여야 한다. css#navbar {    width: 80%;    height: 23px;  }    #navbar ul {    list-style-type: none;  }    #navbar li {    float: left;..

CSS에서는 불가능한 연산, 변수, 함수 등의 확장 기능을 의미한다.  1. 데이터 타입 프로퍼티 값으로 사용할 수 있는 값에는 각각의 데이터 타입(Data type)이 존재한다. SassScript는 7가지의 데이터 타입을 제공한다.   // 숫자형(Number)$font-size: 16px;$line-height: 1.5;// 문자열(String)$font-family: 'Arial', sans-serif;// 컬러(Color)$primary-color: #3498db;$secondary-color: rgba(255, 0, 0, 0.5);// 부울(Boolean)$is-active: true;$is-disabled: false;// 널(Null)$no-value: null;// 리스트(List)$co..