공부기록용

🧐mixin을 사용할 때도 함수처럼 인자를 전달해서 include시 사용할 수 있는데 인자에 기본값을 설정하면 사용시 따로 값을 전달하지 않으면 mixin생성시 작성한 인자의 순서에 관계없이 기본값이 적용된다고 한다. 근데 실제로 작성해보는데 계속 순서에 맞게 값이 들어가서 알맞는 값으로 들어가지 못해 제대로 된 적용이 되지 않았다. 난 우ㅐ,,,왜 안되지,,,,,,,,// Variables$color-white: #fff;$color-black: #000;$color-primary: #00BC70;$font-size: 14px;// 텍스트 스타일 믹스@mixin text-style($font-size, $font-weight: 400, $color: $color-black) { font-size: ..

@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가 있었는데 ..