Sass부터.
이 글은 당신을 제외하고 당신 주위의 모든 사람들이 Sass를 사용하고 있다고 생각하는 사람들을 위해 준비한 것입니다.
일반적으로 Sass를 배우고 싶은 사람은 다음과 같은 문제가 있습니다.
Sass와 Scss 사이에는 어떤 차이가 있습니까?
Sass는 하나의 언어로 확장된 CSS로 원시적인 형식에서 HTML처럼 축소된 끼워넣기로 작성되어 부모와 아이 간의 관계를 더욱 쉽게 작성할 수 있다.Scss는 이 언어의 문법으로 CSS와 매우 비슷하다.두 언어CSS의 기능을 확장하고 브라우저에 들어가기 전에 미리 처리하고 CSS로 변환합니다.대부분의 경우, 당신이 Sass를 들었을 때, 이 사람은 SCSS에 대해 이야기하고 있을 것이다. 왜냐하면 그것은 가장 유행하는 문법이기 때문이다.
사전 처리?
사전 처리는 Sass 코드를 CSS로 컴파일하는 절차입니다.그것은 삼키기, 꼬르륵, 웹 패키지 등을 통해 완성할 수 있으며, 이것은 Sass를 배우고 싶지만 이런 자동 프로그램을 사용하기 어려운 사람들에게 장애가 될 수 있다.우리는 이 문제를 해결하기 위해 라이브 Sass 컴파일러(VSCode의 확장)를 사용할 것이다.
실시간 Sass 컴파일러를 사용하여 Sass 처리
우선 다운로드 확장Live Sass Compiler from the VSCode Marketplace
확장자는 모든 Sass 파일을 검색하고 같은 폴더에서 일반 및 축소 CSS를 생성합니다.최종 파일을 저장할 폴더를 구성하려면 확장자 설정으로 이동하여 해당 설정에 액세스하십시오.json.
그리고 이 코드를 문서에 추가하기만 하면 됩니다. (이미 있으면 편집합니다.)이 절에서 코드의 형식을 정의합니다. 확장이든 축소든. 확장된 이름과 저장할 위치입니다.나는 옵션
generateMap 을 false로 보류합니다. 왜냐하면 우리는 보통 맵을 사용하지 않기 때문입니다."liveSassCompile.settings.formats": [
{
"format": "expanded",
"extensionName": ".css",
"savePath": "app / css"
},
{
"format": "compressed",
"extensionName" : ".min.css",
"savePath": "app / css"
},
],
"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.excludeList": [
"** / node_modules / **",
".vscode / **",
// add your folder here !!
"** / example / **"
], the
주 파이프 내부.scss
@import './components/button.scss';
@import './components/reset.scss';
@import './components/variables.scss';
파일 구조
만약 코드의 크기가 이 점을 증명한다면 스타일시트에서 책임 분리를 만드는 것이 매우 중요하다. 이렇게 하면 코드는 더욱 쉽게 유지하고 수정할 수 있다.
7 x 1이라는 항목에는 다음과 같이 기본 파일을 가져온 7개의 다른 폴더에서 요소를 분리하는 표준 Sass 구조가 있습니다.
sass /
|
| - abstracts /
| | - _variables.scss # Sass Variables
| | - _functions.scss # Sass Functions
| | - _mixins.scss # Sass Mixins
| | - _placeholders.scss # Sass Placeholders
|
| - base /
| | - _reset.scss # Reset / normalize
| | - _typography.scss # Typography rules
| … # Etc.
|
| - components /
| | - _buttons.scss # Buttons
| | - _carousel.scss # Carousel
| | - _cover.scss # Cover
| | - _dropdown.scss # Dropdown
| … # Etc.
|
| - layout /
| | - _navigation.scss # Navigation
| | - _grid.scss # Grid system
| | - _header.scss # Header
| | - _footer.scss # Footer
| | - _sidebar.scss # Sidebar
| | - _forms.scss # Forms
| … # Etc.
|
| - pages /
| | - _home.scss # Home specific styles
| | - _contact.scss # Contact specific styles
| … # Etc.
|
| - themes /
| | - _theme.scss # Default theme
| | - _admin.scss # Admin theme
| … # Etc.
|
| - vendors /
| | - _bootstrap.scss # Bootstrap
| | - _jquery-ui.scss # jQuery UI
| … # Etc.
|
`- main.scss # Main Sass file
Sass 변수 x CSS 변수
Sass 변수와 CSS 변수 사이에는 다음과 같은 차이가 있습니다.
Sass 변수는 정적입니다.
컴파일된 Sass 변수는 정적 값이 되고 CSS 변수는 여전히 변수입니다. 브라우저 개발 도구를 사용하여 웹에서 편집할 수도 있고 Javascript로 접근할 수도 있습니다.
CSS 변수는 미디어 질의의 매개 변수로 사용할 수 없습니다.
@media screen and (max-width: var (- small-screen)) {
/ * Won’t work* /
}
@media screen and (max-width: $small-screen ) {
/ * Will work :) * /
}
DOM 요소는 Sass 변수를 의미하지 않습니다.
: root {
--font-size: 3em;
}
@media screen and (max-width: 432px) {
/ * In the 432px wide viewport the font-size will be 2em * /
--font-size: 2em;
}
// CSS
--btn-color: #CD4445;
// Sass
$btn-color: #CD4445;
:: root {
--primary: #34CED1;
--secondary: #FCFAF7;
- success: #505155;
}
.dark-theme {
--primary: #FCFAF7;
--secondary: #505155;
--success: #34CED1;
}
.dark-theme를 삽입해야 한다. 클래스 선택기가 :root 선택기보다 더 큰 특수성을 가지기 때문에 테마 스타일은 기본 스타일과 중첩된다.<body class="dark-theme" >
<! - Variables within this class will be inherited
by all elements of the body! ->
</body>
Sass를 사용하여 중첩된 CSS를 작성할 수 있습니다.
나는 많은 사람들이 Sass를 사용하는 것을 보았다. 단지 기이한 CSS를 작성하기 위해서일 뿐이다. 나는 판단하지 않는다. 그러나 더 잘할 수 있다. 특히 만약에 BEM이나 SMACSS와 같은 CSS 모델을 사용한다면 매우 직관적인 방식으로 각자의 블록에 요소를 삽입할 수 있다.Sass x에서 생성된 CSS를 사용하여 만든 버튼의 예를 봅니다.
👉 회사 명
.btn {
all: unset;
color: #FAFAFA;
background-color: #1A1A1A;
height: 40px;
padding: 5px 10px;
transition: background .6s ease-in;
width: fit-content;
&-red {
background-color: #F02947;
&:hover {
background-color: #D63C53;
}
}
}
.btn {
all: unset;
color: #FAFAFA;
background-color: # 1A1A1A;
height: 40px;
padding: 5px 10px;
transition: background .6s ease-in;
width: fit-content;
}
.btn-red {
background-color: #F02947;
}
.btn-red:hover {
background-color: #D63C53;
}
body {
nests/*...*/
nav {
/*...*/
ul {
/ * ... * /
li {
/*...*/
a {
/ * Please avoid the fuck out of this * /
}
}
}
}
}
@at-root을 사용하는 것이 재미있습니다.그러면 선택기가 코드에 중첩되지 않고 문서의 루트 디렉터리에 컴파일되어 CSS를 더욱 읽을 수 있게 됩니다.@at-rootin its documentation에 대한 더 많은 정보를 읽을 수 있습니다.국경원법에 대해 더 알고 싶은 사람은 누구든지I recommend this documentation.
매핑, 목록 및 순환 사용
물론
.btn에 수식자--red, --blue, --green를 끼워 넣을 수 있습니다. 수식자마다 각자의 :hover가 있지만 더 실용적인 방법이 있습니다. - 스티커를 사용합니다.맵이 산열이나 대상인 것을 알 수 있습니다. 맵 자체가 키와 값을 수신합니다.목록 표현을 사용하여 더 많은 요소를 저장할 수도 있습니다.👉 지도.
$font-weights: (
"regular": 400,
"medium": 500,
"bold": 700,
);
$buttons: (
"regular" $primary $white,
"danger" $danger $white,
"success" $success $white,
"secondary" $white $darkgrey
);
$buttons 목록에는 단추 이름, 배경색, 글꼴 색깔이 있는 문자열이 있습니다. 따라서 이 목록은 @each 순환을 사용하여 다른 단추를 만들 수 있습니다. 이 순환은 일부 프로그래밍 언어의 for나 for와 매우 비슷합니다.다음 함수는
$buttons 목록의 각 요소에 대해 특정 작업을 수행합니다.이 예에서, 우리의 목록은 세 개의 쉼표로 구분된 요소로 구성되어 있다.@each에서 우리는 목록에 있는 그룹의 모든 요소에 변수를 정의했기 때문에 @each 그룹에서 진행되는 매번 교체에 대해 이 변수들은 서로 다른 값을 사용할 것이다..btn에서 우리가 자신의 색깔로 장식부호를 끼워 넣은 것을 기억하십니까?@each에서 같은 일을 할 수 있지만, 선택기와 변수를 연결할 때, 우리는 이 기호#{}를 사용하고 변수 이름을 전달합니다. 이 예에서는 $name 입니다.$buttons: (
"regular" $primary $white,
"danger" $danger $white,
"success" $success $white,
"secondary" $white $darkgrey
);
.btn {
all: unset;
color: #FAFAFA;
background-color: #1A1A1A;
height: 40px;
padding: 5px 10px;
transition: background .6s ease-in;
width: fit-content;
@each $name, $bg, $color in $buttons {
& __ #{$name} {
/ * ... code * /
}
}
}
$bg를 background-color, $color를 color로 설정할 수 있다.위조 클래스 :hover 를 사용하여 끼워 넣을 수도 있고,darken이라는 Scss 색 함수를 사용하여 어두운 색을 전달할 수도 있다.Darken은 색상 변수 또는 값과 색상이 어두워져야 하는 백분율의 두 가지 매개변수를 수신합니다.$buttons: (
"regular" $primary $white,
"danger" $danger $white,
"success" $success $white,
"secondary" $white $darkgrey
);
.btn {
all: unset;
color: #FAFAFA;
background-color: #1A1A1A;
height: 40px;
padding: 5px 10px;
transition: background .6s ease-in;
width: fit-content;
@each $name, $bg, $color in $buttons {
& __ #{$name} {
background-color: $bg;
color: $color;
&:hover {
background-color: darken ($bg, 10%);
}
}
}
}
내 코드 펜에서 전체 코드를 볼 수 있습니다. 이 모드는 부트스트랩과 매우 유사합니다.
마찬가지로 디자인 영패를 바탕으로 구성 요소에 대한 수식자를 동적으로 구축할 수 있습니다.
이 게시물은 내가 인터넷에서 만난 가장 좋은 사람 중 한 명이 번역한 것이다. 고마워, 형제야.🤙🏽
다음 문장에서 나는 함수, 혼합, 블록과 계산을 더 많이 토론할 것이다.만약 이것이 당신에게 유용하다면, 당신이 도움이 된다고 생각하는 사람과 나누세요.의심, 건의?내 트위터에 댓글을 달거나 메시지를 보내라.
Reference
이 문제에 관하여(Sass부터.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/lixeletto/headstarting-with-sass-2id9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
