연습장

https://imagineu.tistory.com/23#main.scss [CSS] SCSS 아키텍처 7-1 pattern 폴더 및 파일 정리 하는 기준 (+ 실제 구성)CSS 공부를 위해 Udemy에서 advanced css인강을 하나 들었었는데, 그 인강에서 SCSS 파일들을 구분해놓은 방식이 신기했었다. 나중에 알고보니까 그렇게 파일을 구분해놓은 것이 CSS 아키텍처 중 하나인imagineu.tistory.com https://sass-guidelin.es/ko/#section-37 Sass Guidelines — Korean translation분별 있고, 유지∙확장 가능한 Sass 작성을 위한 주관적인 스타일가이드.sass-guidelin.es 7-1 패턴abstracts, base, comp..

보통 html 과 css 를 작성하고 저장하면 반영이되는데, scss 는 컴파일을 거쳐야하기 때문에 이를 확인하려면 컴파일을 수행해야되는 번거로움 이 있다.색깔 하나 바꿀때마다 컴파일해서 확인할 수는 없지않나.... ' Live Sass Compiler' 확장프로그램을 설치하여 이러한 문제를 완화 할 수 있을듯 하다. 확장 프로그램에서 Live Sass Compiler 를 검색,줄이 안그어진 최신버전을 설치 폴더 구조 생성 DOCTYPE html>html lang="en">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Documenttitle>head..

설치 $ 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..

https://poiemaweb.com/sass-basics Sass - Basics | PoiemaWebSass(Syntactically Awesome StyleSheets)는 CSS pre-processor로서 CSS의 한계와 단점을 보완하여 보다 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. CSS의 간결한 문법은 배poiemaweb.com 1. 소개 CSS pre-processor로서 CSS의 한계와 단점을 보완하여, 가독성이 높고 코드의 재사용에 유리한 CSS를 생성하기 위한 CSS의 확장(extension)이다. 기능변수의 사용조건문과 반복문ImportNestingMixinExtend/Inheritance 장점CSS보다 심플한 표기법으로 C..