# Sass
230327 멋쟁이사자처럼 프론트엔드스쿨
📌 스프린트 회고_2 JD(Job Description) 분석 토스, 우아한 형제들, 카카오 JD 키워드&분석 HTML, CSS, JS : 기본적인 능력. 능숙한 활용 능력이 필요하다. SPA프레임워크 : 모든 회사가 자바스크립트 프레임워크 및 라이브러리를 사용하
SASS
SASS란? CSS로 컴파일 되는 스타일 시트 확장 언어, CSS 전처리기의 하나. 개발은 Sass를 기반으로 한 후, CSS로 export한다. 브라우저는 Sass파일을 직접 읽지 못함. 그러기 때문에 일반 CSS로 컴파일 해야함. 메인 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를 활용하여...
Sass의 개요와 사용 방법 (feat. Visual Studio Code)
Sass가 무엇인지, 어떻게 작동하는지, 어떻게 사용할 수 있는지에 대해 작성해 보겠습니다.
너무도 많은 스타일 라이브러리 무엇을 선택해야 하나
세상에는 많은 스타일 라이브러리들이 있다. 그중에서 가장 유명한 것들을 사용해본 필자가 개드립과 함께 장단점을 빠르게 훑어보는 포스트입니다.
Sass, SCSS 문법 정리
Sass (Synthetically Awesome StyleSheets) CSS 전처리기로써, 변수, 상속, 혼합, 중첩등의 다양한 기능을 제공합니다. 다만 전처리기로 작성한 코드는 css로 컴파일을 거친 뒤 실행 시킬 수 있습니다. > * 💡 CSS 전처리기
SASS의 기능 mixin
mixin이란? SASS기능중 하나로 CSS속성 여러개를 함수로 저장해서 태그마다 쉽게 적용할수있는 기능 > 이렇게 함수를 적용하고 태그에 함수를 적용하고 CSS로 변환하면 위에 처럼 된다. mixin의 변수 지정 mixin은 변수도 지정할수있는데. 각 태그 마다 border와 color의 색깔을 바꾸고 싶다면 > 위에 코드처럼 변수를 지정하고 이렇...
SASS의 연산자와 색깔함수
darken : 어둡게lighten : 밝게saturate : 더 선명하게(높은 채도)desaturate : 더 흐리게(낮은 채도)adjust-hue : 명도 변경rgba : alpha값 변경사용방법SASS는 연산기능을 지원하고 있다.사칙연산을 지원한다. +(더하기),
SASS기능 USE
SASS의 다른기능 USE? USE란 다른 SASS파일에 있는 CSS속성들을 가져올때 사용한다. 만약 서로 다른 CSS파일에서 태그와 CSS속성이 겹칠때 개발자가 반복해서 속성을 적는걸 막아준다. 즉, > 이 코드가 적혀있는 test.scss파일이 있다. 그리고 다른 SCSS파일에 똑같이 적용하고 싶을때 > 이 코드를 적용하고 CSS파일로 변환하면 똑같이...
SASS 문법
SASS는 CSS와 다르게 같은 부모를 가진 다른 태그를 선택할때부모를 반복해서 선택하지 않게 해주는 장점이 있다.해당 코드를 css로 바꾸게 된다면위와 같이 .gnb와.box는 같은 부모태그인 header를 가지고 있다. 일반적인 css라면 저렇게 부모를 일일이 지정
SASS(SCSS)에 대해 알아보자
CSS의 확장언어로 CSS의 부족한 부분을 채워주기 위한 언어이다.해당 언어는 직접적으로 html에 링크해도 브라우저가 읽지 못하기 때문에 css로 컴파일을 해야한다.SASS와 SCSS의 차이점은 SASS는 들여 쓰기+줄 바꿈형식이고SCSS는 중괄호+세미콜론 형식이다.
