web
-
Sass 사용하기 - 변수, 색상 관련 함수SASS (SCSS) 2019. 6. 26. 13:21
1. 변수 : 스타일을 작성할 때 코드를 반복적으로 사용하는 경우가 있다. 예를 들어 대표적으로 컬러가 될 수 있겠다. 그 외에도 배경색, 너비, 폰트, 서체 등이 있을 수 있다. sass에서는 이러한 반복적인 코드를 변수에 담아 반복적인 코드를 쓰지않고 줄일 수 있도록 도와준다. 변수 설정을 하면 수정을 할 때도 간편할 것이다. 변수 하나만 바꾸면 되니까. 사실 css 에서도 컬러 변수를 사용 할 수 있다. :root { var-main-color: #333; //변수설정 } .main h3 { color: var(main-color); //원하는 변수 사용 } 학원에서 배웠을 때 이렇게 배웠기 때문에 당연히 실무에서도 쓸 수 있겠지 생각했으나, 이러한 css 변수 설정은 최신 버전의 웹킷에만 한정되기..
-
Sass 사용하기 - 출력스타일과 주석사용하기 / '&' 사용하여 상위 선택자 참조하기SASS (SCSS) 2019. 6. 26. 13:16
1. sass 출력 스타일 : sass는 4가지의 css 출력 스타일을 지원한다. 그 4가지는 1) 중첩(nested, 기본), 2) 확장(expanded), 3) 축약(compact), 4) 압축(compressed) 가 있다. 1) 중첩 (nested) : sass 출력스타일중 기본으로, 중첩된 형식이다. html 구조를 반영하기 위해 규칙마다 들여쓰는 스타일이다. 이런식으로 들여써지기 때문에 스타일 구조를 쉽게 알아 볼 수 있다. 2) 확장(expanded) : 직접 작성한 css 스타일과 유사하다. 기본 중첩 스타일 대신 확장 스타일을 사용하려면 sass 파일을 감시하라는 명령어에 플래그를 추가하면 된다. $ sass --watch --style expanded style.scss:style.cs..
-
Sass 사용하기 - 중첩규칙 , 네임페이스 속성 중첩카테고리 없음 2019. 6. 26. 13:08
1. 중첩 규칙 (Nesting Rules) : SASS를 사용하면 선택자를 서로 다른 선언문에서 게속 반복해서 쓰지않고, 선언문 안에 서로 중첩해 쓸 수 있다. 또한 선택자에서 각 엘리먼트를 반복하지 않고 게층 구조를 나타내는 중첩 방식으로 코드를 간다하게 만든다. 글만 보면 이게 뭔가 싶다. 바로 예제를 보자. 예를 들어서 로고가 있고 옆에 헤더 타이틀이있고 헤더를 기준으로 아래에 줄이있는 그런 화면을 만들어본다고 가정하자. 이런식으로 (아래에도 내용이나 이미지가 있다고 가정하자. 예제를 위해서 영역을 나타내는 모양만 해놓았다.) 다음과 같이 쓸 수 있다. html에서 썼던 계층구조가 그대로 css에도 옮겨진 느낌이다. 만약 이것을 일반 css로 썼다면 다음과 같이 쓸 수 있을 것이다. 확실히 불필요..