• webmini life skin Ver 1.4.1 update view
  • 사이트 제작 문의 오랜 경험을 바탕으로 웹퍼블리싱을 해드립니다 제작 문의하기
  • 블로그 리뷰 문의 검색엔진최적화로 제품 리뷰를 해드립니다 리뷰 문의하기

sass7

728x90
[CSS]css 최신문법에서 추가되는 기능과 설명, 호환성 여부 CSS 기능 중 주목할 만한 몇 가지와 그 설명들입니다.브라우저에서 지원가능한 시기에는 구지 SASS를 사용할 필요가 없는 날이 오겠네요. 1. CSS Nesting설명:Sass와 같은 CSS 전처리기에서 제공되던 네스팅(Nesting) 기능이 이제 CSS 표준으로 도입되고 있습니다. 사용법:.container { color: black; .child { color: red; }} 장점: 코드를 더 간결하게 작성할 수 있고 구조적으로 이해하기 쉬움. 지원 여부:Chrome: 부분 지원 (플래그 설정 필요)Firefox: 미지원 (개발 중)Safari: 미지원 (예정)Edge: Chrome 기반으로 부분 지원호환성 팁: Sass 또는 PostCSS 같은 전처리기를 활용해 네스팅을 사용 가능. 2..
[SCSS]mixin을 활용한 모바일 폰트 사이즈 설정(62.5%) CSS(Sass)에서 모바일 초기 셋팅을 위해 62.5%를 기준으로 폰트 크기와 관련된 믹스인과 함수를 설정할 수 있습니다. 이렇게 하면 rem 단위를 더 직관적으로 사용할 수 있게 됩니다. 예를 들어, 1rem이 10px로 설정되어 계산이 간편해집니다. 여기서는 기본 설정과 함께 유용한 믹스인 및 함수를 정의해 보겠습니다.  1. 기본 설정먼저, html 태그의 폰트 크기를 62.5%로 설정합니다. 이렇게 하면 기본 폰트 크기가 16px에서 10px로 변경됩니다.html { font-size: 62.5%; // 1rem = 10px}body { font-size: 1.6rem; // 16px margin: 0; padding: 0;} 2. 폰트 크기 믹스인폰트 크기를 쉽게 설정하기 위한 믹스인을..
[SASS]SASS,SCSS 어느것을 사용하면 좋을까? 차이점 살펴보기 초기 버전의 Sass는 들여쓰기를 사용하여 구문을 정의하는 특이한 문법을 가졌습니다.그러나 이러한 문법은 일부 사용자에게 혼란을 줄 수 있었고, CSS와의 호환성이 떨어졌습니다. 이에 따라 나중에 SCSS가 도입되었습니다. SCSS는 CSS와 거의 동일한 구문을 가지고 있기 때문에 CSS를 작성하던 개발자들이 쉽게 스위칭할 수 있었습니다. 또한 SCSS는 중괄호 {}와 세미콜론 ;을 사용하여 구문을 정의하기 때문에 CSS와의 호환성이 더 높았습니다. 이러한 이유로 SCSS가 Sass보다 더 인기 있고 널리 사용되고 있습니다. 결국, Sass와 SCSS는 모두 Sass의 구현 형태 중 하나이며, 프로젝트에 따라 선택할 수있습니다. 그러나 대부분의 경우 SCSS가 더 일반적으로 사용되며, Sass보다 더 널..
[SCSS]SCSS문법과 예시 SCSS (Sassy CSS)는 Sass의 주요 구현 중 하나로, CSS와 거의 동일한 구문을 사용하며 Sass의 모든 기능을 지원합니다. SCSS는 중괄호 {}와 세미콜론 ;을 사용하여 CSS와 같은 구문을 사용하기 때문에 CSS 코드를 유효한 SCSS로 변환하는 것이 쉽습니다. 1.변수 (Variables)$ 기호를 사용하여 변수를 정의할 수 있습니다.$primary-color: #FF6347; 2.중첩 (Nesting)CSS 선택자를 중첩하여 코드의 가독성을 높일 수 있습니다..container { width: 100%; .header { background-color: #333; color: #FFF; }} 3.Mixin재사용 가능한 코드 조각을 생성하는데..
[SASS]vscode sass 컴파일 경로 설정하기 vscode에서 Live Sass Compiler를 통한 sass 컴파일 경로 설정하는 방법입니다. Live Sass Compiler 설정파일에서 해당부분을 찾아서 수정해줍니다. "liveSassCompile.settings.formats": [ { "format": "expanded", "extensionName": ".css", "savePath": "~/.." }, { "format": "compressed", "extensionName": ".min.css", "savePath": "~/.." } ], savePath에서 설정하시면 됩니다. "savePath": null (현재 .sass파일에 .css생성) "savePath": "~/" (현재 위치로 부터의 상대경로) "savePath": "/"..
[SASS]vscode Live Sass Compiler 컴파일 안될때 설정 vscode에서 sass를 쉽고 간편하게 컴파일 해주는 Live Sass Compiler 확장프로그램이 있습니다. node.js와 sass를 이상없이 설치했는데, vscode에서 Live Sass Compiler로 컴파일이 안됐을때는 settings.json 파일을 확인해보셔야합니다. 참고로 node-sass 버전은 아래와 같습니다. node-sass 8.0.0 (Wrapper) [JavaScript] libsass 3.5.5 (Sass Compiler) [C/C++] 먼저 Live Sass Compiler 실행을 했는지 살펴보세요. 실행 방법은 vscode 하단에 Watch Sass로 되어있는걸, 클릭하면 Watching...로 변경됩니다. 출력창을 보시면 Watching... 으로 메시지가 보입니다...
[SASS]npm install node-sass 설치 에러, node.js 버전 확인 SASS 설치시 (npm install node-sass) 오류가 발생하면, 설치된 node.js 버전이 node-sass 버전을 지원하지 않을 가능성이 크다.node.js 버전이 호환되는 node-sass 버전표를 참고해보자. NodeJSSupported node-sass versionNode ModuleNode 209.0+115Node 198.0+111Node 188.0+108Node 177.0+, 102Node 166.0+93Node 155.0+, 88Node 144.14+83Node 134.13+, 79Node 124.12+, 72Node 114.10+, 67Node 104.9+, 64Node 84.5.3+, 57Node https://www.npmjs.com/package/node-sass n..
반응형