나의 코딩 기록

코딩을 기록하는 공간

코딩 기록/Sass [SCSS]

Sass[SCSS] 기초 이론 8 - @if @else 조건문 / @for, @each 반복문 을 알아볼게요. @if, @else 조건문 우선 @if @else 조건문인데 자바스크립트와 사용방식은 같습니다. 어렵지 않은데 바로 예시 코드를 볼게요. @mixin ellipsis($lines: 1) { @if ($lines == 1) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } @else { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: $lines; -webkit-box-orient: vertical; } } .line1 { ..

2023. 2. 14.

코딩 기록/Sass [SCSS]

Sass[SCSS] 기초 이론 7 - @function 함수를 알아보도록 할게요. @mixin과 비슷한 느낌으로 사용하면 되는데 차이점은 @mixin은 해당하는 스타일 css들을 반환하고, @function은 @return으로 '값'을 반환합니다. 사용용도가 값을 반환하는거라 계산식에서 자주 쓰이는 경우가 있습니다. 바로 예를 들어보도록 할게요. @function vw($value, $deviceWidth:1400px) { @if $deviceWidth == pc { $deviceWidth: 1400; /* 만약 인자가 pc라면 1400 기준 */ } @else if $deviceWidth == mobile { $deviceWidth: 767; /* 만약 인자가 mobile이라면 767 기준 */ } @..

2023. 2. 14.

코딩 기록/Sass [SCSS]

Sass[SCSS] 응용 - SCSS 반응형 미디어 쿼리(@media) 응용하기 ($변수, @mixin, @content 등을 이용) 를 해보도록 할게요. :) 보통 Sass 부트스트랩이나 다른곳에서 반응형 미디어쿼리를 활용할때 사용하는 방식이 있습니다. scss 에서도 비슷하게 많이들 사용하는데 보통 프로젝트마다 반응형 미디어쿼리의 기준 화면 너비들을 미리 설정하고 작업하는 경우가 많습니다. 그렇지 않으면 나중에 다 완성된 코드를 보면 반응형 사이즈가 통일성 없이 막 다르게 적용되어 있는 경우가 많아서 scss를 통해서 미리 설정하고 해두면 편합니다. 아래 코드를 살펴볼게요. /* mixins.scss */ // (min-width) 변수 설정 $breakpoints-up: ( xs: '540px', ..

2023. 2. 12.

코딩 기록/Sass [SCSS]

Sass[SCSS] 기초 6 - 다중 변수 선언, 내장 함수(multiple variable, map-get) 를 알아보도록 할게요. 변수를 선언할때도 한가지 값이 아닌 배열이나 객체와 같이 여러개의 값을 하나의 변수에 지정해줄 수 있습니다. 사용방법은 아래와 같은데 어렵지 않습니다. /* 다중 변수 선언 */ $color: ( red: rgb(241, 72, 72), blue: rgb(49, 102, 247), skin: antiquewhite ); /* map-get(변수명, 변수키값) */ .sub-title { background-color: map-get($color, skin); color: map-get($color, red); } .description { background-color: ..

2023. 2. 12.

코딩 기록/Sass [SCSS]

Sass[SCSS] 기초 5 - 그룹 선언하기, 사용하기 (@mixin, @include) 를 살펴보도록 하겠습니다. scss 를 사용하는 이유중 하나인데 이론은 별로 어렵지 않습니다. 그냥 그룹을 선언하여 만들어주고 그걸 그대로 사용하는 방식입니다. 쉽게 말해 자바스크립트에서 함수와 비슷한 방식으로 사용됩니다. @mixin 으로 그룹을 만들고 @include 를 통해서 사용하면 됩니다. /* mixin 선언 */ @mixin point { position: relative; padding-left: 10px; &::before { content: ''; display: inline-block; position: absolute; top: 0; left: 0; width: 8px; height: 8px;..

2023. 2. 12.

코딩 기록/Sass [SCSS]

Sass[SCSS] 기초 4 - scss에서 연산자 사용하기 (Operations & calc) 를 해보도록 할게요 이거는 뭐 어려운게 없어서 간단하게 정리하겠습니다. :) 보통 css 에서는 연산자를 사용할때 calc()를 이용해서 사용하는데 scss에서는 똑같이 calc()를 사용해도 되고 사용하지 않아도 컴파일되면서 계산된 값이 잘 적용됩니다. 특이사항은 나누기를 할때는 괄호를 이용해줘야 하는데 괄호를 넣지 않으면 컴파일 될 때 그냥 20px / 2 이렇게 그대로 컴파일됩니다. 그 외에 다른 특이사항은 아래 코드에 예시와 주석으로 적어놓았습니다. :) /* style.scss */ $font-size: 15px; $box-padding: 20px; .box { margin: 20px + 10px; ..

2023. 2. 5.

코딩 기록/Sass [SCSS]

Sass[SCSS] 기초 3 - @import 를 사용해서 다른 scss 파일 불러오기 (파일 분할 Partial) 를 해보겠습니다. 보통 css 파일에서 다른 외부 css 파일을 불러올때는 @import url 을 사용하는데 /* style.css 파일 */ @import url('font.css'); css 최상단에 이런식으로 css 파일을 불러옵니다. (경로가 다를경우 경로에 맞춰서 불러와주면 됨) 마찬가지로 scss 파일에서도 css 외부파일을 불러올때 이런식으로 불러오면 되는데 문제는 scss파일에서 scss파일을 불러올때 입니다. 저는 style.scss 라는 테스트 파일 안에서 font.scss 파일을 불러와볼게요. /* style.scss 파일 */ @import url("font.scss..

2023. 2. 5.

코딩 기록/Sass [SCSS]

Sass[SCSS] 기초 2 - 변수(Variables) 알아보기 & 사용하기 (전역변수, 지역변수, 재할당 등) 우선 Scss에서 가장 많이 쓰는 기능중 하나인 변수입니다. 일반 css에서도 변수 선언 방법이 있는데 바로 :root 가상 클래스입니다. :root { --main-color: skyblue; --basic-padding: 5px 15px; } 이런식으로 --main-color 와 --basic-padding 의 변수를 미리 설정해두고 .button { background-color: var(--main-color); padding: var(--basic-padding); } 이런식으로 사용합니다. Scss에서도 문법 방식은 다르지만 이와 마찬가지로 비슷하게 사용됩니다. /* 변수 선언 (..

2023. 2. 2.

코딩 기록/Sass [SCSS]

Scss 기초적인 부분을 기록해두려고 합니다. 우선 주석을 사용해볼게요. Scss 의 주석은 두가지가 있는데 자바스크립트와 마찬가지로 해당하는 줄에 적용하는 주석인 //, 그리고 해당하는 지정영역에 적용하는 주석인 /* */ 이 두 가지가 있습니다. // 이 주석은 컴파일 후에 사라짐 /* 이 주석은 컴파일 후에도 남아있음 */ 여기서 특이점은 // 주석은 컴파일된 css 파일에서 사라진다는 점입니다. 반면에 /* */ 주석은 컴파일돼서 css 파일에 잘 나타나는 모습입니다. 컴파일 된 후에도 남아있어야 할 주석은 /* */으로 해줘야 겠죠?? 이어서 기본적인 scss를 쭉 작성한 코드를 올려볼게요 :) // 이 주석은 컴파일 후에 사라짐 /* 이 주석은 컴파일 후에도 남아있음 */ .link-list ..

2023. 1. 31.