[クイックキャンパスNekaraku杯第2期]-31日勉強
HTML&CSSコース
sass/scs->sassには2つのsass構文があり、scss構文(両方ともsass!これはどの構文を使用するかによって異なります)
Dart Sassは最近流行っています
node-sassの代わりにDart Sassを使用
sass:math
math:div(12px, 2);
package.json
{
"scripts": {
"start": "npm run watch",
"sass": "sass sass:css",
"watch": "npm run sass -- --watch"
},
"devDependencies": {
"sass": "^1.38.0"
}
}
scriptはコマンドを設定する部分です(startを実行するとrunは書かずnpm startだけで実行できますが、その他はrunキーが必要です!)devDependenciesには、npmを使用してインストールされたパッケージがリストされています.watch部分の
--
は区別のため、前に1つ追加します.開発には
style.css.map
ファイルが必要です!(ソースマッピング) npm i -D rimraf
rimarfパッケージのインストール@use './base';
@use './color';
dart scss-->@import
の代わりに@use
を使用!_functions.scss
// 루트 요소 기본 단위 --------------------------------------------------------------- /
$root-value: 16px !default;
// 단위 제거 함수 ------------------------------------------------------------------ /
@function removeUnit($value){
@return ($value / ($value * 0 + 1));
}
// px을 rem 단위로 변경하는 함수 ------------------------------------------------------- /
@function rem($value, $base: $root-value){
@return (removeUnit($value / $base)) * 1rem;
}
// px을 em 단위로 변경하는 함수 ------------------------------------------------------- /
@function em($value, $base: $root-value){
@return (removeUnit($value / $base)) * 1em;
}
Input要素のクロスブラウズに使用するcss.form-input::-ms-clear, .form-input::-webkit-search-cancel-button, .form-input::-webkit-search-results-button {
display: none;
}
.form-input::-ms-reveal {
display: none;
}
.form-input::placeholder, .form-input::-ms-input-placeholder {
color: #BDBDBD;
}
apperance: none; --> 요소내장구성요소제거
.form-group [class$="__label"]
input.scss
@use './base' as *;
@use './color' as *;
@use './function' as *;
// 입력 서식 기본 스타일 및 아웃라인 제거
.form-input__input {
appearance: none;
&:focus {
outline: none;
}
}
.form-input {
// 중첩 패턴을 쓰면서도 명시도 점수를 낮출 수 있음
&__label {
display: block;
color: $form-text-color;
font-weight: 500;
font-size: rem(14px);
}
&__input {
display: block;
padding: 0 rem(16px);
width: 100%;
height: rem(48px);
border: 1px solid $form-border-color;
color: $form-text-color;
font-size: rem(14px);
&::-ms-clear,
&::-webkit-search-cancel-button,
&::-webkit-search-results-button {
display: none;
}
&::-ms-reveal {
display: none;
}
&::placeholder,
&::-ms-input-placeholder {
color: $form-placeholder-color;
}
// :not() 선택자의 경우 IE11 이하를 지원하지 않음.
// &:not(:read-only):not([readonly]):not(:disabled) {
// }
&:hover {
border-color: $form-border-hover-color;
}
&:focus {
border-color: $form-border-focus-color;
}
&:read-only,
&[readonly] {
background-color: $form-bg-readonly-color;
cursor: default;
}
&:disabled {
background-color: $form-bg-disabled-color;
color: $form-text-disabled-color;
cursor: not-allowed;
}
&:read-only:hover,
&[readonly]:hover,
&:disabled:hover,
&:read-only:focus,
&[readonly]:focus,
&:disabled:focus {
border-color: $form-border-color;
}
}
&__input--error + .error-message {
display: block;
}
@at-root .error-message {
font-size: rem(14px);
color: $form-error-color;
margin-top: rem(8px);
display: none;
}
}
textarea.scss
@use './base' as *;
@use './color' as *;
@use './function' as *;
@use './form' as *;
.form-textarea__textarea {
&:focus {
outline: none;
}
&::-webkit-scrollbar {
width: 4px;
}
&::-webkit-scrollbar-thumb {
border-radius: 2px;
background-color: rgba(#f00, 0.5);
}
}
.form-textarea {
&__textarea {
display: block;
padding: 0 rem(16px);
width: 100%;
height: auto;
min-height: 80px;
border: 1px solid $form-border-color;
color: $form-text-color;
font-size: rem(14px);
resize: none;
}
}
checkbox.scss
@use './base' as *;
@use './color' as *;
@use './function' as *;
@use './form' as *;
.icon {
display: inline-block;
font-size: 0;
line-height: 0;
overflow: hidden;
&-checkbox--square {
position: absolute;
top: 0;
left: 0;
width: rem(18px);
height: rem(18px);
background-image: url(./../assets/sprite-checkbox-square.png);
background-repeat: no-repeat;
}
}
.form-checkbox {
position: relative;
&__checkbox {
position: absolute;
top: 0;
left: 0;
width: rem(18px);
height: rem(18px);
cursor: pointer;
}
&__checkbox:checked + &__label .icon-checkbox--square {
background-position: -20px 0;
}
&__checkbox:disabled + &__label .icon-checkbox--square {
background-position: -40px 0;
}
&__checkbox:checked:disabled + &__label .icon-checkbox--square {
background-position: -60px 0;
}
&__label {
position: relative;
height: rem(18px);
line-height: rem(18px);
padding-left: rem(22px);
}
}
switch.scss
@use "sass:math";
@use './base' as *;
@use './color' as *;
@use './function' as *;
@use './form' as *;
.form-switch {
display: inline-block;
position: relative;
vertical-align: top;
&__switch {
position: absolute;
top: 0;
left: 0;
width: 100%;
margin-right: 80px;
cursor: pointer;
}
&__switch:checked + &__label:after {
transform: translateX(rem(16px));
}
&__switch:checked + &__label:before {
background-color: $form-switch-bg-color;
}
&__label {
$h: 24px;
position: relative;
height: $h;
line-height: $h;
padding-left: rem(50px);
&::before, &::after {
content: "";
position: absolute;
}
&::before {
width: rem(40px);
top: 0;
left: 0;
height: 100%;
border-radius: math.div($h, 2);
background-color: $gray6;
}
&::after {
top: rem(4px);
left: rem(4px);
width: rem(16px);
height: rem(16px);
border-radius: 50%;
background: $form-switch-button-color;
transition: all 300ms;
}
}
}
button.scss
@use "sass:math";
@use './base' as *;
@use './color' as *;
@use './function' as *;
@use './form' as *;
.button {
box-sizing: border-box;
display: inline-flex;
padding: rem(8px) rem(16px);
border: 0;
outline: 0;
font-size: rem(14px);
font-weight: 600;
cursor: pointer;
letter-spacing: -1px;
text-decoration: none;
color: inherit;
border-radius: rem(6px);
&:hover,
&:focus {
box-shadow: 0 0 1px 1px rgba($button-shadow-color, 0.3);
background-color: darken($button-default-color, 15%);
}
}
[class*="button-fill--"] {
color: $button-white-color;
}
.button-fill {
&--default {
background-color: $button-default-color;
}
&--primary {
background-color: $button-primary-color;
&:hover,
&:focus {
box-shadow: 0 0 1px 1px rgba($button-shadow-color, 0.3);
background-color: darken($button-primary-color, 15%);
}
}
&--warning {
background-color: $button-warning-color;
&:hover,
&:focus {
box-shadow: 0 0 1px 1px rgba($button-shadow-color, 0.3);
background-color: darken($button-warning-color, 15%);
}
}
}
今日はSassをインストールして、Sass文法で前のSecretCode課題を書き直して熟知する時間です.授業中のサイト&閲覧内容
Reference
この問題について([クイックキャンパスNekaraku杯第2期]-31日勉強), 我々は、より多くの情報をここで見つけました https://velog.io/@hustle-dev/패스트캠퍼스-네카라쿠배-2기-31일차-공부テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol