실제 원본 Sass (scss 아님)에서 아래 믹스 인을 사용하여 단락과 모든 제목을 자동으로 설정할 수 있습니다 font-size.
훨씬 콤팩트하기 때문에 좋아합니다. 그리고 더 빨리 입력합니다. 그 외에는 동일한 기능을 제공합니다. 어쨌든 여전히 새로운 구문 인 scss를 고수하려면 Sass 내용을 scss로 자유롭게 변환하십시오.
[CONVERT SASS TO SCSS 여기]
아래에서는 네 가지 Sass 믹스 인을 제공합니다. 필요에 따라 설정을 조정해야합니다.
=font-h1p-style-generator-manual() // You don’t need to use this one. Those are only styles to make it pretty.
=media-query-base-font-size-change-generator-manual() // This mixin sets the base body size that will be used by the h1-h6 tags to recalculate their size in a media query.
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6) // Here you will set the size of h1 and size jumps between h tags
=config-and-run-font-generator() // This one only calls the other ones
설정을 마치고 나면 하나의 믹스 인을 호출하면됩니다. + config-and-run-font-generator () . 자세한 내용은 아래 코드 및 주석을 참조하십시오.
헤더 태그에 대해 수행되는 것처럼 미디어 쿼리에 대해 자동으로 수행 할 수 있지만 모든 미디어 쿼리를 사용하므로 모든 사람에게 적합하지는 않습니다. 저는 모바일 우선 디자인 방식을 사용하므로 이것이 그렇게하는 것입니다. 이 코드를 자유롭게 복사하여 사용하십시오.
이 믹스들을 파일로 복사하고 붙여 넣기 :
=font-h1p-style-generator-manual()
body
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif // google fonts
font-size: 100%
line-height: 1.3em
%headers
line-height: 1em
font-weight: 700
p
line-height: 1.3em
font-weight: 300
@for $i from 1 through 6
h#{$i}
@extend %headers
=media-query-base-font-size-change-generator-manual()
body
font-size: 1.2em
@media screen and (min-width: 680px)
body
font-size: 1.4em
@media screen and (min-width: 1224px)
body
font-size: 1.6em
@media screen and (min-width: 1400px)
body
font-size: 1.8em
=h1p-font-size-generator-auto($h1-fs: 3em, $h1-step-down: 0.3, $body-min-font-size: 1.2em, $p-same-as-hx: 6)
$h1-fs: $h1-fs // Set first header element to this size
$h1-step-down: $h1-step-down // Decrement each time by 0.3
$p-same-as-hx: $p-same-as-hx // Set p font-sieze same as h(6)
$h1-fs: $h1-fs + $h1-step-down // Looping correction
@for $i from 1 through 6
h#{$i}
font-size: $h1-fs - ($h1-step-down * $i)
@if $i == $p-same-as-hx
p
font-size: $h1-fs - ($h1-step-down * $i)
// RUN ONLY THIS MIXIN. IT WILL TRIGGER THE REST
=config-and-run-font-generator()
+font-h1p-style-generator-manual() // Just a place holder for our font style
+media-query-base-font-size-change-generator-manual() // Just a placeholder for our media query font size
+h1p-font-size-generator-auto($h1-fs: 2em, $h1-step-down: 0.2, $p-same-as-hx: 5) // Set all parameters here
모든 믹스를 필요에 맞게 구성하십시오-IT와 함께하십시오! :) 그런 다음 실제 SASS 코드 맨 위에 다음을 호출하십시오.
+config-and-run-font-generator()
이 출력이 생성됩니다. 매개 변수를 사용자 정의하여 다른 결과 세트를 생성 할 수 있습니다. 그러나 우리는 모두 다른 미디어 쿼리를 사용하기 때문에 일부 믹스 인은 수동으로 편집해야합니다 (스타일 및 미디어).
생성 된 CSS :
body {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 100%;
line-height: 1.3em;
word-wrap: break-word; }
h1, h2, h3, h4, h5, h6 {
line-height: 1em;
font-weight: 700; }
p {
line-height: 1.3em;
font-weight: 300; }
body {
font-size: 1.2em; }
@media screen and (min-width: 680px) {
body {
font-size: 1.4em; } }
@media screen and (min-width: 1224px) {
body {
font-size: 1.6em; } }
@media screen and (min-width: 1400px) {
body {
font-size: 1.8em; } }
h1 {
font-size: 2em; }
h2 {
font-size: 1.8em; }
h3 {
font-size: 1.6em; }
h4 {
font-size: 1.4em; }
h5 {
font-size: 1.2em; }
p {
font-size: 1.2em; }
h6 {
font-size: 1em;
}