목록2024/08/08 (5)
연습장
설치 $ 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..