# scss

Sass mixin / include
mixin은 묶음 스타일 속성을 재사용할 때 사용하는 문법이다.사용방법 :@mixin 명칭{속성}으로 재사용할 CSS 스타일 속성을 선언한다.@include {명칭}으로 불러와 사용한다.SASSCSS전 예시와 다르게 속성은 동일하지만 값은 때마다 다르게 주고 싶다면 인

Sass 설치 및 기본 문법
sass를 이용하면 CSS를 효율적으로 모듈화를 시킬 수 있고, 여러가지 반복문, 조건문 같은 다양한 기능을 이용할 수 있어 편리하다.아래와 같은 기능을 사용할 수 있다.변수의 사용조건문과 반복문ImportNestingMixinExtend/Inheritancesass를

SASS 세팅
SASS 세팅을 하는데 우여곡절이 많았는데... 간단하게 복습 차원에서 정리해보겠다...우선 나는 NUXT 라는 것을 이용해서 파일을 만들었다.node_modules 및 package.json이 자동으로 생성되었다!하지만 node version이 14버전으로 구버전이었

SCSS ( sass ) @each 활용
scss(sass)를 공부하면 기존에 사용했던 tailwindcss의 형태와 비슷한 functional css 를 구현해 보고자 @each를 활용하여...

Review Day4
CSS max-width | margin-auto 평균적으로 같이 자주 쓰이는 속성 margin-* > 위 식으로 작성하게 되면 cascading으로 margin-top : 100px;적용 안됨 margin : auto; 는 상하좌우 마진 동일하게 부여 margin-top을 부여했는데 margin:auto가 덮어쓰기 됨 ...:nth-child(n) ...
CSS(SCSS)의 선택자, 가상 요소와 가상 클래스
오늘은 이번주에 학습하며 제일 헷갈렸던 내용인 SCSS의 선택자와 CSS의 가상 요소, 가상 클래스에 대해서 정리해 볼 예정이다. class="apple blue"인 div 태그와 class="apple green" 인 div 태그가 있고, 두 태그에 폰트 사이즈는 1

Sass의 개요와 사용 방법 (feat. Visual Studio Code)
Sass가 무엇인지, 어떻게 작동하는지, 어떻게 사용할 수 있는지에 대해 작성해 보겠습니다.

SCSS_Clone coding[1]
너비와 높이는 요소의 '콘텐츠 박스' 크기에만 적용 된다. 원하는 크기를 설정할 때, 테두리나 안쪽 여백을 고려해야 한다. 기본적으로 요소에 테두리나 안쪽 여백이 있으면 너비와 높이에 더해서 화면에 그린다. 이를 바꾸는 속성으로는 아래가 두 가지가 있다.content-
SCSS
scss는 도구일 뿐, 작동되지 않는다.\_(언더바)가 붙은 파일은 변환이 되지 않는다.변환이 된다 = css로 작동 되는@import ''; 로 세팅해줘야 제 역할을 할 수 있다.세팅 후 Watch Sass 또는 저장 하면, css 폴더에 style.css 파일 안에

너무도 많은 스타일 라이브러리 무엇을 선택해야 하나
세상에는 많은 스타일 라이브러리들이 있다. 그중에서 가장 유명한 것들을 사용해본 필자가 개드립과 함께 장단점을 빠르게 훑어보는 포스트입니다.

Sass, SCSS 문법 정리
Sass (Synthetically Awesome StyleSheets) CSS 전처리기로써, 변수, 상속, 혼합, 중첩등의 다양한 기능을 제공합니다. 다만 전처리기로 작성한 코드는 css로 컴파일을 거친 뒤 실행 시킬 수 있습니다. > * 💡 CSS 전처리기

SCSS (2)
' + , - , \* % ' 는 SCSS에서도 사용가능 ' / ' (나누기) 는 단축 속성을 구분하는 기호라 일반적으로는 사용 불가능괄호를 추가한다변수를 선언한다또 다른 산술 연산을 추가한다(3번의 경우 괄호에 따라 결과값이 다르므로 신경쓰기)scss에는 단위가 틀

SCSS
1번 : SCSS -> CSS 컴파일 해도 주석이 남아있음2번 : 컴파일하면 없어짐필요에 따라 사용하기https://www.sassmeister.com/scss 연습용 사이트 '>' 자식요소 넣고 싶을때

[jQuery] 제이쿼리 정리 1 (+스크립트 언어, 컴파일 언어, 인터프리터 언어, scss, bem)
$(css 셀렉터).메소드()ex) . -> class / 해당 css 셀렉터가 가리키는 모든 엘리먼트에 원하는 메소드(jquery가 제공하는 api)를 동작시킬 수 있습니다. 그리고 모든 제이쿼리 메소드들은 해당 메소드가 동작을 마치고 리턴될 때 자신이 제어했던 엘리

CSS에 변수와 함수를 넣어 쓸 수 있는 SCSS
https://cloud-library.tistory.com/entry/Hovercss를-이용한-hover효과-모음