공부기록용

@extend기존의 스타일을 상속하고자 하는 경우에 사용한다.@extend 선택자; Initial button --> order add chcekout /* style.scss *//* Google Web Font - "Montserrat", sans-serif*/@import url("https://fonts.googleapis.com/css?family=Montserrat:300,400,500&display=swap");*{ font-family: "Montserrat", sans-serif;}body{ display: grid; justify-content: center; align-items: center; height: 100vh;}...

@mixin재사용할 그룹을 선언(정의 및 지정)/* SCSS 선언 방식 */@mixin 믹스인 이름 { 재사용할 스타일 속성들}/* Sass 선언 방식(주로 SCSS를 사용하니 참고만) */= 믹스인 이름 { 재사용할 스타일 속성들} @include정의된 @mixin을 사용(포함)/* SCSS 사용 방식*/선택자 { @include 믹스인 지정 이름}/* Sass 사용 방식*/선택자 { + 믹스인 지정 이름}@mixin과 @include 사용 codingworks publishing class new letter broadcast /* .scss *//* Google Web Font - "Montserrat", sans-serif*/@import url("https://fonts...

At-rule란,At-rule는 css에 동작 방법을 지시하는 CSS문이다.at 기호 @로 시작하고 그 뒤에 식별자가 오고 다음 세미콜론 또는 다음 css 블록 중 먼저 오는 것까지의 모든 항목을 포함한다.ex. @media / @font-face / @keyframes  Sass에는 일반적인 CSS at-규칙에 대한 몇 가지 동작이 추가된다. 보간법을 포함할 수 있고 스타일 규칙에 중첩될 수 있다. @media및 같은 일부 기능은 보간 @supports없이 규칙 자체에서 SassScript를 직접 사용할 수도 있다. @import @import CSS @규칙은 다른 스타일 시트에서 스타일 규칙을 가져올 때 쓰인다. 이 규칙은 @charset 규칙을 제외하고 모든 다른 종류의 규칙보다 선행해야 한다 CS..

Sass(SCSS)의 주석기본적으로 CSS의 주석와 동일한 /* */구문을 사용하며 추가로 한 줄을 위한 // 주석처리도 가능하다. 단 한 줄 주석은 .css로 컴파일되면 보이지 않는다..scss/*여러 줄을 동시에*/// 한 줄만 주석처리> 하지만 빌드된 css에서는 한 줄 주석을 처리되지 않으니 주의해야 함중첩 규칙(nesting)CSS에서는 스타일을 정의하기 위해서 선택자를 서로 다른 선언문에서 반복해서 작성해주어야 하는 경우가 많다. /* div의 반복 */div{ width: 100%;}div p{ color: red;}div p span{ color: blue;} Sass에서는 선택자를 서로 다른 선언문에서 계속 반복해서 작성하지 않고 서로 중첩하여 사용할 수 있다.>..

Sass 구문으로 작성된 코드는 Sass전처리기와 컴파일러의 도움을 받아야 CSS파일로 빌드(build)되어야 사용할 수 있다. PC에서 Sass를 CSS로 빌드할 수 있는 도구가 준비되어야 한다.1. VS code확장 기능 이용하기vs code의 확장 프로그램을 설치해서 사용하는 방법이다 html을 만들고 style 폴더를 생성후 .scss로 파일을 생성한다. scss에 스타일을 작성하고  하단에 위치한 Watch Sass를 눌러주면 CSS파일로 변환을 해준다. 그럼 작성한 SCSS를 CSS로 변환한 CSS 파일도 생성된다. 코드를 변경할때는 SCSS의 코드를 변경하면 CSS는 자동으로 build되어 반영되므로 수정시 SCSS를 수정하는 것이 좋다.기존 dart Sass와 Ruby Sass가 있었는데 ..

js로 이것저것 만들어보는 도중 css가 많아져 복잡하고 찾기 쉽지 않음을 부쩍 체감하는 요즘 이런 문제들을 보완하고자 새로운 언어를 배워보기로해서 sass(scss)를 도전하게 되었다. SASS(Syntactically Awesome StyleSheets) CSS의 단점을 보완하여 더 빠르고 효율적으로 스타일을 작성할 수 있는 구문을 위해 만든 CSS 전처리기이다.전처리: 전처리기(Preprocessor)로 컴파일 전에 코드를 적정한 상태로 준비하거나 처리하는 일컴파일: 컴파일러(Compiler) 가 고수준 언어를 저수준 언어로 나타내는 일 소스 프로그램을 목적(object) 프로그램으로 변환하는 작업이다.  즉, 우리가 c언어로 열심히 코딩한 내용을 어셈블리어로 바꿔준다.어셈블: 어셈블러(Assemb..