[{"data":1,"prerenderedAt":1762},["ShallowReactive",2],{"article-useful-sass-mixins":3},{"id":4,"title":5,"body":6,"category":1750,"createdAt":1752,"description":1753,"extension":256,"index":1754,"meta":1755,"navigation":85,"path":1756,"publish":85,"seo":1757,"series":1754,"seriesTitle":1754,"stem":1758,"tag":1759,"thumbnail":1760,"updatedAt":1754,"__hash__":1761},"articles\u002Farticles\u002Fuseful-sass-mixins.md","Sassをプロジェクトで使うときに役に立つメディアクエリmixinとカラーパターン",{"type":7,"value":8,"toc":1746},"minimark",[9,13,25,28,31,35,38,143,146,948,951,1061,1076,1079,1094,1246,1249,1416,1419,1732,1735,1739,1742],[10,11,12],"p",{},"こんにちはjunです。最近のプロジェクトではsassばかり使っていてもうcssを書くことがなくなっているせいか、sassの記法でcssを書いてしまいエラーを起こすことも何回かありました笑。sassはフロントエンドで開発するならば絶対に使えておきたいツールです。その中でプロジェクトに関係なく、同じユーティリティーなライブラリ的なmixinを使うことがあります。",[10,14,15,16,20,21,24],{},"例えば引数を指定するだけでプロジェクトで定義したメディアクエリを出すmixin、bootstrapのように",[17,18,19],"code",{},"component-primary","とすれば",[17,22,23],{},"primary","色にしてくれるクラスを出力するmixinなどです。mixin意外にもmargin,paddingのユーティリティなどもよく使います。",[10,26,27],{},"いつも忘れてサイトを探して時間を潰しているのでここにメモしたいと思います。",[10,29,30],{},"※sassの解説ですがscssの記述をします！sass=scssと思ってみてください。",[32,33,34],"h2",{"id":34},"引数を使用して特定のメディアクエリを利かすmixin",[10,36,37],{},"sassを使用する場合、あるクラスに対するメディアクエリは以下のように付与できます。",[39,40,45],"pre",{"className":41,"code":42,"language":43,"meta":44,"style":44},"language-scss shiki shiki-themes material-theme-ocean",".p-project{\n    font-size:20px;\n\n    @media screen and (max-width: 399px){\n        font-size:10px;\n    } \n}\n","scss","",[17,46,47,63,80,87,115,128,137],{"__ignoreMap":44},[48,49,52,56,60],"span",{"class":50,"line":51},"line",1,[48,53,55],{"class":54},"sAklC",".",[48,57,59],{"class":58},"s5Dmg","p-project",[48,61,62],{"class":54},"{\n",[48,64,66,70,73,77],{"class":50,"line":65},2,[48,67,69],{"class":68},"s6YsC","    font-size",[48,71,72],{"class":54},":",[48,74,76],{"class":75},"sx098","20px",[48,78,79],{"class":54},";\n",[48,81,83],{"class":50,"line":82},3,[48,84,86],{"emptyLinePlaceholder":85},true,"\n",[48,88,90,94,98,101,104,107,109,112],{"class":50,"line":89},4,[48,91,93],{"class":92},"s6cf3","    @media",[48,95,97],{"class":96},"s0W1g"," screen ",[48,99,100],{"class":54},"and",[48,102,103],{"class":54}," (",[48,105,106],{"class":58},"max-width",[48,108,72],{"class":54},[48,110,111],{"class":75}," 399px",[48,113,114],{"class":54},"){\n",[48,116,118,121,123,126],{"class":50,"line":117},5,[48,119,120],{"class":68},"        font-size",[48,122,72],{"class":54},[48,124,125],{"class":75},"10px",[48,127,79],{"class":54},[48,129,131,134],{"class":50,"line":130},6,[48,132,133],{"class":54},"    }",[48,135,136],{"class":96}," \n",[48,138,140],{"class":50,"line":139},7,[48,141,142],{"class":54},"}\n",[10,144,145],{},"cssの場合はメディアクエリでクラスを囲む必要ありますが、sassは対象のクラスでラップするだけで有効なのでかなり便利です。ただしメディアクエリの記述が長いこと、ブレークポイントの数値・変数を入れるのが面倒なので以下のようなmixinを作成します。",[39,147,149],{"className":41,"code":148,"language":43,"meta":44,"style":44},"$sm-point:400;\n$md-point:600;\n$lg-point:1000;\n$xl-point:1300;\n\n$breakpoint-up: (\n  'sm': 'screen and (min-width: #{$sm-point}px)',\n  'md': 'screen and (min-width: #{$md-point}px)',\n  'lg': 'screen and (min-width: #{$lg-point}px)',\n  'xl': 'screen and (min-width: #{$xl-point}px)',\n) !default;\n\n$breakpoint-down: (\n  'sm': 'screen and (max-width: #{$sm-point - 1}px)',\n  'md': 'screen and (max-width: #{$md-point - 1}px)',\n  'lg': 'screen and (max-width: #{$lg-point - 1}px)',\n  'xl': 'screen and (max-width: #{$xl-point - 1}px)',\n) !default;\n\n$breakpoint-only: (\n  'sm': 'screen and (max-width: #{$sm-point - 1}px)',\n  'md-sm': 'screen and (max-width: #{$md-point - 1}px) and (min-width: #{$sm-point}px)',\n  'lg-md': 'screen and (max-width: #{$lg-point - 1}px) and (min-width: #{$md-point}px)',\n  'xl-lg': 'screen and (max-width: #{$xl-point - 1}px) and (min-width: #{$lg-point}px)',\n  'xl': 'screen and (min-width: #{$xl-point}px)',\n) !default;\n\n\u002F*\nsm  =>  スマホ\nmd  =>  タブレット\nlg  =>  PC\nxl  =>  でかいPC\n*\u002F\n\n@mixin mq-up($breakpoint: md) {\n  @media #{map-get($breakpoint-up, $breakpoint)} {\n    @content;\n  }\n}\n\n@mixin mq-down($breakpoint: md) {\n  @media #{map-get($breakpoint-down, $breakpoint)} {\n    @content;\n  }\n}\n\n@mixin mq-only($breakpoint: md-sm) {\n  @media #{map-get($breakpoint-only, $breakpoint)} {\n    @content;\n  }\n}\n",[17,150,151,163,175,187,199,203,213,249,277,305,333,344,349,359,394,426,458,490,499,504,514,545,586,626,666,693,702,707,714,720,726,732,738,744,749,775,802,810,816,821,826,846,867,874,879,884,889,910,931,938,943],{"__ignoreMap":44},[48,152,153,156,158,161],{"class":50,"line":51},[48,154,155],{"class":96},"$sm-point",[48,157,72],{"class":54},[48,159,160],{"class":75},"400",[48,162,79],{"class":54},[48,164,165,168,170,173],{"class":50,"line":65},[48,166,167],{"class":96},"$md-point",[48,169,72],{"class":54},[48,171,172],{"class":75},"600",[48,174,79],{"class":54},[48,176,177,180,182,185],{"class":50,"line":82},[48,178,179],{"class":96},"$lg-point",[48,181,72],{"class":54},[48,183,184],{"class":75},"1000",[48,186,79],{"class":54},[48,188,189,192,194,197],{"class":50,"line":89},[48,190,191],{"class":96},"$xl-point",[48,193,72],{"class":54},[48,195,196],{"class":75},"1300",[48,198,79],{"class":54},[48,200,201],{"class":50,"line":117},[48,202,86],{"emptyLinePlaceholder":85},[48,204,205,208,210],{"class":50,"line":130},[48,206,207],{"class":96},"$breakpoint-up",[48,209,72],{"class":54},[48,211,212],{"class":54}," (\n",[48,214,215,218,222,225,228,230,233,236,238,241,244,246],{"class":50,"line":139},[48,216,217],{"class":54},"  '",[48,219,221],{"class":220},"sfyAc","sm",[48,223,224],{"class":54},"'",[48,226,227],{"class":96},": ",[48,229,224],{"class":54},[48,231,232],{"class":220},"screen and (min-width: ",[48,234,235],{"class":54},"#{",[48,237,155],{"class":96},[48,239,240],{"class":54},"}",[48,242,243],{"class":220},"px)",[48,245,224],{"class":54},[48,247,248],{"class":54},",\n",[48,250,252,254,257,259,261,263,265,267,269,271,273,275],{"class":50,"line":251},8,[48,253,217],{"class":54},[48,255,256],{"class":220},"md",[48,258,224],{"class":54},[48,260,227],{"class":96},[48,262,224],{"class":54},[48,264,232],{"class":220},[48,266,235],{"class":54},[48,268,167],{"class":96},[48,270,240],{"class":54},[48,272,243],{"class":220},[48,274,224],{"class":54},[48,276,248],{"class":54},[48,278,280,282,285,287,289,291,293,295,297,299,301,303],{"class":50,"line":279},9,[48,281,217],{"class":54},[48,283,284],{"class":220},"lg",[48,286,224],{"class":54},[48,288,227],{"class":96},[48,290,224],{"class":54},[48,292,232],{"class":220},[48,294,235],{"class":54},[48,296,179],{"class":96},[48,298,240],{"class":54},[48,300,243],{"class":220},[48,302,224],{"class":54},[48,304,248],{"class":54},[48,306,308,310,313,315,317,319,321,323,325,327,329,331],{"class":50,"line":307},10,[48,309,217],{"class":54},[48,311,312],{"class":220},"xl",[48,314,224],{"class":54},[48,316,227],{"class":96},[48,318,224],{"class":54},[48,320,232],{"class":220},[48,322,235],{"class":54},[48,324,191],{"class":96},[48,326,240],{"class":54},[48,328,243],{"class":220},[48,330,224],{"class":54},[48,332,248],{"class":54},[48,334,336,339,342],{"class":50,"line":335},11,[48,337,338],{"class":54},")",[48,340,341],{"class":75}," !default",[48,343,79],{"class":54},[48,345,347],{"class":50,"line":346},12,[48,348,86],{"emptyLinePlaceholder":85},[48,350,352,355,357],{"class":50,"line":351},13,[48,353,354],{"class":96},"$breakpoint-down",[48,356,72],{"class":54},[48,358,212],{"class":54},[48,360,362,364,366,368,370,372,375,377,380,383,386,388,390,392],{"class":50,"line":361},14,[48,363,217],{"class":54},[48,365,221],{"class":220},[48,367,224],{"class":54},[48,369,227],{"class":96},[48,371,224],{"class":54},[48,373,374],{"class":220},"screen and (max-width: ",[48,376,235],{"class":54},[48,378,379],{"class":96},"$sm-point ",[48,381,382],{"class":54},"-",[48,384,385],{"class":75}," 1",[48,387,240],{"class":54},[48,389,243],{"class":220},[48,391,224],{"class":54},[48,393,248],{"class":54},[48,395,397,399,401,403,405,407,409,411,414,416,418,420,422,424],{"class":50,"line":396},15,[48,398,217],{"class":54},[48,400,256],{"class":220},[48,402,224],{"class":54},[48,404,227],{"class":96},[48,406,224],{"class":54},[48,408,374],{"class":220},[48,410,235],{"class":54},[48,412,413],{"class":96},"$md-point ",[48,415,382],{"class":54},[48,417,385],{"class":75},[48,419,240],{"class":54},[48,421,243],{"class":220},[48,423,224],{"class":54},[48,425,248],{"class":54},[48,427,429,431,433,435,437,439,441,443,446,448,450,452,454,456],{"class":50,"line":428},16,[48,430,217],{"class":54},[48,432,284],{"class":220},[48,434,224],{"class":54},[48,436,227],{"class":96},[48,438,224],{"class":54},[48,440,374],{"class":220},[48,442,235],{"class":54},[48,444,445],{"class":96},"$lg-point ",[48,447,382],{"class":54},[48,449,385],{"class":75},[48,451,240],{"class":54},[48,453,243],{"class":220},[48,455,224],{"class":54},[48,457,248],{"class":54},[48,459,461,463,465,467,469,471,473,475,478,480,482,484,486,488],{"class":50,"line":460},17,[48,462,217],{"class":54},[48,464,312],{"class":220},[48,466,224],{"class":54},[48,468,227],{"class":96},[48,470,224],{"class":54},[48,472,374],{"class":220},[48,474,235],{"class":54},[48,476,477],{"class":96},"$xl-point ",[48,479,382],{"class":54},[48,481,385],{"class":75},[48,483,240],{"class":54},[48,485,243],{"class":220},[48,487,224],{"class":54},[48,489,248],{"class":54},[48,491,493,495,497],{"class":50,"line":492},18,[48,494,338],{"class":54},[48,496,341],{"class":75},[48,498,79],{"class":54},[48,500,502],{"class":50,"line":501},19,[48,503,86],{"emptyLinePlaceholder":85},[48,505,507,510,512],{"class":50,"line":506},20,[48,508,509],{"class":96},"$breakpoint-only",[48,511,72],{"class":54},[48,513,212],{"class":54},[48,515,517,519,521,523,525,527,529,531,533,535,537,539,541,543],{"class":50,"line":516},21,[48,518,217],{"class":54},[48,520,221],{"class":220},[48,522,224],{"class":54},[48,524,227],{"class":96},[48,526,224],{"class":54},[48,528,374],{"class":220},[48,530,235],{"class":54},[48,532,379],{"class":96},[48,534,382],{"class":54},[48,536,385],{"class":75},[48,538,240],{"class":54},[48,540,243],{"class":220},[48,542,224],{"class":54},[48,544,248],{"class":54},[48,546,548,550,553,555,557,559,561,563,565,567,569,571,574,576,578,580,582,584],{"class":50,"line":547},22,[48,549,217],{"class":54},[48,551,552],{"class":220},"md-sm",[48,554,224],{"class":54},[48,556,227],{"class":96},[48,558,224],{"class":54},[48,560,374],{"class":220},[48,562,235],{"class":54},[48,564,413],{"class":96},[48,566,382],{"class":54},[48,568,385],{"class":75},[48,570,240],{"class":54},[48,572,573],{"class":220},"px) and (min-width: ",[48,575,235],{"class":54},[48,577,155],{"class":96},[48,579,240],{"class":54},[48,581,243],{"class":220},[48,583,224],{"class":54},[48,585,248],{"class":54},[48,587,589,591,594,596,598,600,602,604,606,608,610,612,614,616,618,620,622,624],{"class":50,"line":588},23,[48,590,217],{"class":54},[48,592,593],{"class":220},"lg-md",[48,595,224],{"class":54},[48,597,227],{"class":96},[48,599,224],{"class":54},[48,601,374],{"class":220},[48,603,235],{"class":54},[48,605,445],{"class":96},[48,607,382],{"class":54},[48,609,385],{"class":75},[48,611,240],{"class":54},[48,613,573],{"class":220},[48,615,235],{"class":54},[48,617,167],{"class":96},[48,619,240],{"class":54},[48,621,243],{"class":220},[48,623,224],{"class":54},[48,625,248],{"class":54},[48,627,629,631,634,636,638,640,642,644,646,648,650,652,654,656,658,660,662,664],{"class":50,"line":628},24,[48,630,217],{"class":54},[48,632,633],{"class":220},"xl-lg",[48,635,224],{"class":54},[48,637,227],{"class":96},[48,639,224],{"class":54},[48,641,374],{"class":220},[48,643,235],{"class":54},[48,645,477],{"class":96},[48,647,382],{"class":54},[48,649,385],{"class":75},[48,651,240],{"class":54},[48,653,573],{"class":220},[48,655,235],{"class":54},[48,657,179],{"class":96},[48,659,240],{"class":54},[48,661,243],{"class":220},[48,663,224],{"class":54},[48,665,248],{"class":54},[48,667,669,671,673,675,677,679,681,683,685,687,689,691],{"class":50,"line":668},25,[48,670,217],{"class":54},[48,672,312],{"class":220},[48,674,224],{"class":54},[48,676,227],{"class":96},[48,678,224],{"class":54},[48,680,232],{"class":220},[48,682,235],{"class":54},[48,684,191],{"class":96},[48,686,240],{"class":54},[48,688,243],{"class":220},[48,690,224],{"class":54},[48,692,248],{"class":54},[48,694,696,698,700],{"class":50,"line":695},26,[48,697,338],{"class":54},[48,699,341],{"class":75},[48,701,79],{"class":54},[48,703,705],{"class":50,"line":704},27,[48,706,86],{"emptyLinePlaceholder":85},[48,708,710],{"class":50,"line":709},28,[48,711,713],{"class":712},"sC9rS","\u002F*\n",[48,715,717],{"class":50,"line":716},29,[48,718,719],{"class":712},"sm  =>  スマホ\n",[48,721,723],{"class":50,"line":722},30,[48,724,725],{"class":712},"md  =>  タブレット\n",[48,727,729],{"class":50,"line":728},31,[48,730,731],{"class":712},"lg  =>  PC\n",[48,733,735],{"class":50,"line":734},32,[48,736,737],{"class":712},"xl  =>  でかいPC\n",[48,739,741],{"class":50,"line":740},33,[48,742,743],{"class":712},"*\u002F\n",[48,745,747],{"class":50,"line":746},34,[48,748,86],{"emptyLinePlaceholder":85},[48,750,752,755,759,762,765,767,770,772],{"class":50,"line":751},35,[48,753,754],{"class":92},"@mixin",[48,756,758],{"class":757},"sdLwU"," mq-up",[48,760,761],{"class":54},"(",[48,763,764],{"class":96},"$breakpoint",[48,766,72],{"class":54},[48,768,769],{"class":96}," md",[48,771,338],{"class":54},[48,773,774],{"class":54}," {\n",[48,776,778,781,784,787,789,791,794,797,800],{"class":50,"line":777},36,[48,779,780],{"class":92},"  @media",[48,782,783],{"class":54}," #{",[48,785,786],{"class":757},"map-get",[48,788,761],{"class":54},[48,790,207],{"class":96},[48,792,793],{"class":54},",",[48,795,796],{"class":96}," $breakpoint",[48,798,799],{"class":54},")}",[48,801,774],{"class":54},[48,803,805,808],{"class":50,"line":804},37,[48,806,807],{"class":92},"    @content",[48,809,79],{"class":54},[48,811,813],{"class":50,"line":812},38,[48,814,815],{"class":54},"  }\n",[48,817,819],{"class":50,"line":818},39,[48,820,142],{"class":54},[48,822,824],{"class":50,"line":823},40,[48,825,86],{"emptyLinePlaceholder":85},[48,827,829,831,834,836,838,840,842,844],{"class":50,"line":828},41,[48,830,754],{"class":92},[48,832,833],{"class":757}," mq-down",[48,835,761],{"class":54},[48,837,764],{"class":96},[48,839,72],{"class":54},[48,841,769],{"class":96},[48,843,338],{"class":54},[48,845,774],{"class":54},[48,847,849,851,853,855,857,859,861,863,865],{"class":50,"line":848},42,[48,850,780],{"class":92},[48,852,783],{"class":54},[48,854,786],{"class":757},[48,856,761],{"class":54},[48,858,354],{"class":96},[48,860,793],{"class":54},[48,862,796],{"class":96},[48,864,799],{"class":54},[48,866,774],{"class":54},[48,868,870,872],{"class":50,"line":869},43,[48,871,807],{"class":92},[48,873,79],{"class":54},[48,875,877],{"class":50,"line":876},44,[48,878,815],{"class":54},[48,880,882],{"class":50,"line":881},45,[48,883,142],{"class":54},[48,885,887],{"class":50,"line":886},46,[48,888,86],{"emptyLinePlaceholder":85},[48,890,892,894,897,899,901,903,906,908],{"class":50,"line":891},47,[48,893,754],{"class":92},[48,895,896],{"class":757}," mq-only",[48,898,761],{"class":54},[48,900,764],{"class":96},[48,902,72],{"class":54},[48,904,905],{"class":96}," md-sm",[48,907,338],{"class":54},[48,909,774],{"class":54},[48,911,913,915,917,919,921,923,925,927,929],{"class":50,"line":912},48,[48,914,780],{"class":92},[48,916,783],{"class":54},[48,918,786],{"class":757},[48,920,761],{"class":54},[48,922,509],{"class":96},[48,924,793],{"class":54},[48,926,796],{"class":96},[48,928,799],{"class":54},[48,930,774],{"class":54},[48,932,934,936],{"class":50,"line":933},49,[48,935,807],{"class":92},[48,937,79],{"class":54},[48,939,941],{"class":50,"line":940},50,[48,942,815],{"class":54},[48,944,946],{"class":50,"line":945},51,[48,947,142],{"class":54},[10,949,950],{},"実際に使用する際は以下のようにします。",[39,952,954],{"className":41,"code":953,"language":43,"meta":44,"style":44},".test{\n    @include mq-up(xl){\n        \u002F\u002F 1300px以上で有効\n        background-color:blue;\n    }\n\n    @include mq-only(md-sm){\n        \u002F\u002F 599px〜400pxで有効\n        background-color:yellow;\n    }\n\n    \u002F\u002F 1299px ~ 600px, 399px~ で有効\n    background-color:red;\n}\n",[17,955,956,965,978,983,995,1000,1004,1016,1021,1032,1036,1040,1045,1057],{"__ignoreMap":44},[48,957,958,960,963],{"class":50,"line":51},[48,959,55],{"class":54},[48,961,962],{"class":58},"test",[48,964,62],{"class":54},[48,966,967,970,972,974,976],{"class":50,"line":65},[48,968,969],{"class":92},"    @include",[48,971,758],{"class":757},[48,973,761],{"class":54},[48,975,312],{"class":96},[48,977,114],{"class":54},[48,979,980],{"class":50,"line":82},[48,981,982],{"class":712},"        \u002F\u002F 1300px以上で有効\n",[48,984,985,988,990,993],{"class":50,"line":89},[48,986,987],{"class":68},"        background-color",[48,989,72],{"class":54},[48,991,992],{"class":96},"blue",[48,994,79],{"class":54},[48,996,997],{"class":50,"line":117},[48,998,999],{"class":54},"    }\n",[48,1001,1002],{"class":50,"line":130},[48,1003,86],{"emptyLinePlaceholder":85},[48,1005,1006,1008,1010,1012,1014],{"class":50,"line":139},[48,1007,969],{"class":92},[48,1009,896],{"class":757},[48,1011,761],{"class":54},[48,1013,552],{"class":96},[48,1015,114],{"class":54},[48,1017,1018],{"class":50,"line":251},[48,1019,1020],{"class":712},"        \u002F\u002F 599px〜400pxで有効\n",[48,1022,1023,1025,1027,1030],{"class":50,"line":279},[48,1024,987],{"class":68},[48,1026,72],{"class":54},[48,1028,1029],{"class":96},"yellow",[48,1031,79],{"class":54},[48,1033,1034],{"class":50,"line":307},[48,1035,999],{"class":54},[48,1037,1038],{"class":50,"line":335},[48,1039,86],{"emptyLinePlaceholder":85},[48,1041,1042],{"class":50,"line":346},[48,1043,1044],{"class":712},"    \u002F\u002F 1299px ~ 600px, 399px~ で有効\n",[48,1046,1047,1050,1052,1055],{"class":50,"line":351},[48,1048,1049],{"class":68},"    background-color",[48,1051,72],{"class":54},[48,1053,1054],{"class":96},"red",[48,1056,79],{"class":54},[48,1058,1059],{"class":50,"line":361},[48,1060,142],{"class":54},[10,1062,1063,1064,1067,1068,1071,1072,1075],{},"このようにメディアクエリをかなり短く記述できます。引数を指定するだけなので直感的ですし、変数でサイズを定義しているので変更もしやすいです。",[17,1065,1066],{},"mq-up","、",[17,1069,1070],{},"mq-down","はあるブレークポイント以上・以下で働くメディアクエリですが、",[17,1073,1074],{},"mq-only","は指定したメディアクエリ間のみ作用します。このメディアクエリmixinはかなり役に立ち、プロジェクトセットアップ時に毎回やっています。",[32,1077,1078],{"id":1078},"カラーパターンクラス",[10,1080,1081,1082,1085,1086,1089,1090,1093],{},"Bootstrapのボタンクラスで",[17,1083,1084],{},"btn btn-danger","とすると赤い色のボタンになります。",[17,1087,1088],{},"warning","なら黄色、",[17,1091,1092],{},"danger","なら赤色といった具合に色の設定をして、その色のクラスがあればその色にするクラスを作成するmixinです。まずは色をmapで定義します。",[39,1095,1097],{"className":41,"code":1096,"language":43,"meta":44,"style":44},"$colors:(\n    \"red\"   :#E60012,\n    \"orange\":#F39800,\n    \"yellow\":#FFF100,\n    \"green\" :#009944,\n    \"blue\"  :#0068B7,\n    \"purple\":#920783,\n);\n$default-color:map-get($colors,\"red\");\n",[17,1098,1099,1107,1128,1146,1163,1182,1200,1218,1223],{"__ignoreMap":44},[48,1100,1101,1104],{"class":50,"line":51},[48,1102,1103],{"class":96},"$colors",[48,1105,1106],{"class":54},":(\n",[48,1108,1109,1112,1114,1117,1120,1123,1126],{"class":50,"line":65},[48,1110,1111],{"class":54},"    \"",[48,1113,1054],{"class":220},[48,1115,1116],{"class":54},"\"",[48,1118,1119],{"class":96},"   :",[48,1121,1122],{"class":54},"#",[48,1124,1125],{"class":96},"E60012",[48,1127,248],{"class":54},[48,1129,1130,1132,1135,1137,1139,1141,1144],{"class":50,"line":82},[48,1131,1111],{"class":54},[48,1133,1134],{"class":220},"orange",[48,1136,1116],{"class":54},[48,1138,72],{"class":96},[48,1140,1122],{"class":54},[48,1142,1143],{"class":96},"F39800",[48,1145,248],{"class":54},[48,1147,1148,1150,1152,1154,1156,1158,1161],{"class":50,"line":89},[48,1149,1111],{"class":54},[48,1151,1029],{"class":220},[48,1153,1116],{"class":54},[48,1155,72],{"class":96},[48,1157,1122],{"class":54},[48,1159,1160],{"class":96},"FFF100",[48,1162,248],{"class":54},[48,1164,1165,1167,1170,1172,1175,1177,1180],{"class":50,"line":117},[48,1166,1111],{"class":54},[48,1168,1169],{"class":220},"green",[48,1171,1116],{"class":54},[48,1173,1174],{"class":96}," :",[48,1176,1122],{"class":54},[48,1178,1179],{"class":96},"009944",[48,1181,248],{"class":54},[48,1183,1184,1186,1188,1190,1193,1195,1198],{"class":50,"line":130},[48,1185,1111],{"class":54},[48,1187,992],{"class":220},[48,1189,1116],{"class":54},[48,1191,1192],{"class":96},"  :",[48,1194,1122],{"class":54},[48,1196,1197],{"class":96},"0068B7",[48,1199,248],{"class":54},[48,1201,1202,1204,1207,1209,1211,1213,1216],{"class":50,"line":139},[48,1203,1111],{"class":54},[48,1205,1206],{"class":220},"purple",[48,1208,1116],{"class":54},[48,1210,72],{"class":96},[48,1212,1122],{"class":54},[48,1214,1215],{"class":96},"920783",[48,1217,248],{"class":54},[48,1219,1220],{"class":50,"line":251},[48,1221,1222],{"class":54},");\n",[48,1224,1225,1228,1230,1232,1234,1236,1238,1240,1242,1244],{"class":50,"line":279},[48,1226,1227],{"class":96},"$default-color",[48,1229,72],{"class":54},[48,1231,786],{"class":757},[48,1233,761],{"class":54},[48,1235,1103],{"class":96},[48,1237,793],{"class":54},[48,1239,1116],{"class":54},[48,1241,1054],{"class":220},[48,1243,1116],{"class":54},[48,1245,1222],{"class":54},[10,1247,1248],{},"そしてボタンのクラスがあるとします。",[39,1250,1252],{"className":41,"code":1251,"language":43,"meta":44,"style":44},".btn{\n    background-color:$default-color;\n    border:1px solid;\n    border-color:darken($default-color,15%);\n    border-radius:5px;\n    padding:10px;\n    text-align:center;\n\n    @each $key, $color in $colors {\n        &-#{$key}{\n            background-color:$color;\n            border-color:darken($color,15%);\n        }\n    }\n}\n",[17,1253,1254,1263,1273,1288,1309,1321,1332,1344,1348,1364,1372,1384,1403,1408,1412],{"__ignoreMap":44},[48,1255,1256,1258,1261],{"class":50,"line":51},[48,1257,55],{"class":54},[48,1259,1260],{"class":58},"btn",[48,1262,62],{"class":54},[48,1264,1265,1267,1269,1271],{"class":50,"line":65},[48,1266,1049],{"class":68},[48,1268,72],{"class":54},[48,1270,1227],{"class":96},[48,1272,79],{"class":54},[48,1274,1275,1278,1280,1283,1286],{"class":50,"line":82},[48,1276,1277],{"class":68},"    border",[48,1279,72],{"class":54},[48,1281,1282],{"class":75},"1px",[48,1284,1285],{"class":96}," solid",[48,1287,79],{"class":54},[48,1289,1290,1293,1295,1298,1300,1302,1304,1307],{"class":50,"line":89},[48,1291,1292],{"class":68},"    border-color",[48,1294,72],{"class":54},[48,1296,1297],{"class":757},"darken",[48,1299,761],{"class":54},[48,1301,1227],{"class":96},[48,1303,793],{"class":54},[48,1305,1306],{"class":75},"15%",[48,1308,1222],{"class":54},[48,1310,1311,1314,1316,1319],{"class":50,"line":117},[48,1312,1313],{"class":68},"    border-radius",[48,1315,72],{"class":54},[48,1317,1318],{"class":75},"5px",[48,1320,79],{"class":54},[48,1322,1323,1326,1328,1330],{"class":50,"line":130},[48,1324,1325],{"class":68},"    padding",[48,1327,72],{"class":54},[48,1329,125],{"class":75},[48,1331,79],{"class":54},[48,1333,1334,1337,1339,1342],{"class":50,"line":139},[48,1335,1336],{"class":68},"    text-align",[48,1338,72],{"class":54},[48,1340,1341],{"class":96},"center",[48,1343,79],{"class":54},[48,1345,1346],{"class":50,"line":251},[48,1347,86],{"emptyLinePlaceholder":85},[48,1349,1350,1353,1356,1359,1362],{"class":50,"line":279},[48,1351,1352],{"class":92},"    @each",[48,1354,1355],{"class":96}," $key, $color ",[48,1357,1358],{"class":92},"in",[48,1360,1361],{"class":96}," $colors ",[48,1363,62],{"class":54},[48,1365,1366,1369],{"class":50,"line":307},[48,1367,1368],{"class":58},"        &",[48,1370,1371],{"class":54},"-#{$key}{\n",[48,1373,1374,1377,1379,1382],{"class":50,"line":335},[48,1375,1376],{"class":68},"            background-color",[48,1378,72],{"class":54},[48,1380,1381],{"class":96},"$color",[48,1383,79],{"class":54},[48,1385,1386,1389,1391,1393,1395,1397,1399,1401],{"class":50,"line":346},[48,1387,1388],{"class":68},"            border-color",[48,1390,72],{"class":54},[48,1392,1297],{"class":757},[48,1394,761],{"class":54},[48,1396,1381],{"class":96},[48,1398,793],{"class":54},[48,1400,1306],{"class":75},[48,1402,1222],{"class":54},[48,1404,1405],{"class":50,"line":351},[48,1406,1407],{"class":54},"        }\n",[48,1409,1410],{"class":50,"line":361},[48,1411,999],{"class":54},[48,1413,1414],{"class":50,"line":396},[48,1415,142],{"class":54},[10,1417,1418],{},"こうすると",[39,1420,1424],{"className":1421,"code":1422,"language":1423,"meta":44,"style":44},"language-css shiki shiki-themes material-theme-ocean",".btn {\n  background-color: #E60012;\n  border: 1px solid;\n  border-color: #9a000c;\n  border-radius: 5px;\n  padding: 10px;\n  text-align: center; }\n  .btn-red {\n    background-color: #E60012;\n    border-color: #9a000c; }\n  .btn-orange {\n    background-color: #F39800;\n    border-color: #a76800; }\n  .btn-yellow {\n    background-color: #FFF100;\n    border-color: #b3a900; }\n  .btn-green {\n    background-color: #009944;\n    border-color: #004d22; }\n  .btn-blue {\n    background-color: #0068B7;\n    border-color: #003d6b; }\n  .btn-purple {\n    background-color: #920783;\n    border-color: #490442; }\n","css",[17,1425,1426,1434,1448,1462,1476,1488,1500,1516,1526,1538,1552,1561,1573,1588,1597,1609,1624,1633,1645,1660,1669,1681,1696,1705,1717],{"__ignoreMap":44},[48,1427,1428,1430,1432],{"class":50,"line":51},[48,1429,55],{"class":54},[48,1431,1260],{"class":58},[48,1433,774],{"class":54},[48,1435,1436,1439,1441,1444,1446],{"class":50,"line":65},[48,1437,1438],{"class":68},"  background-color",[48,1440,72],{"class":54},[48,1442,1443],{"class":54}," #",[48,1445,1125],{"class":96},[48,1447,79],{"class":54},[48,1449,1450,1453,1455,1458,1460],{"class":50,"line":82},[48,1451,1452],{"class":68},"  border",[48,1454,72],{"class":54},[48,1456,1457],{"class":75}," 1px",[48,1459,1285],{"class":96},[48,1461,79],{"class":54},[48,1463,1464,1467,1469,1471,1474],{"class":50,"line":89},[48,1465,1466],{"class":68},"  border-color",[48,1468,72],{"class":54},[48,1470,1443],{"class":54},[48,1472,1473],{"class":96},"9a000c",[48,1475,79],{"class":54},[48,1477,1478,1481,1483,1486],{"class":50,"line":117},[48,1479,1480],{"class":68},"  border-radius",[48,1482,72],{"class":54},[48,1484,1485],{"class":75}," 5px",[48,1487,79],{"class":54},[48,1489,1490,1493,1495,1498],{"class":50,"line":130},[48,1491,1492],{"class":68},"  padding",[48,1494,72],{"class":54},[48,1496,1497],{"class":75}," 10px",[48,1499,79],{"class":54},[48,1501,1502,1505,1507,1510,1513],{"class":50,"line":139},[48,1503,1504],{"class":68},"  text-align",[48,1506,72],{"class":54},[48,1508,1509],{"class":96}," center",[48,1511,1512],{"class":54},";",[48,1514,1515],{"class":54}," }\n",[48,1517,1518,1521,1524],{"class":50,"line":251},[48,1519,1520],{"class":54},"  .",[48,1522,1523],{"class":58},"btn-red",[48,1525,774],{"class":54},[48,1527,1528,1530,1532,1534,1536],{"class":50,"line":279},[48,1529,1049],{"class":68},[48,1531,72],{"class":54},[48,1533,1443],{"class":54},[48,1535,1125],{"class":96},[48,1537,79],{"class":54},[48,1539,1540,1542,1544,1546,1548,1550],{"class":50,"line":307},[48,1541,1292],{"class":68},[48,1543,72],{"class":54},[48,1545,1443],{"class":54},[48,1547,1473],{"class":96},[48,1549,1512],{"class":54},[48,1551,1515],{"class":54},[48,1553,1554,1556,1559],{"class":50,"line":335},[48,1555,1520],{"class":54},[48,1557,1558],{"class":58},"btn-orange",[48,1560,774],{"class":54},[48,1562,1563,1565,1567,1569,1571],{"class":50,"line":346},[48,1564,1049],{"class":68},[48,1566,72],{"class":54},[48,1568,1443],{"class":54},[48,1570,1143],{"class":96},[48,1572,79],{"class":54},[48,1574,1575,1577,1579,1581,1584,1586],{"class":50,"line":351},[48,1576,1292],{"class":68},[48,1578,72],{"class":54},[48,1580,1443],{"class":54},[48,1582,1583],{"class":96},"a76800",[48,1585,1512],{"class":54},[48,1587,1515],{"class":54},[48,1589,1590,1592,1595],{"class":50,"line":361},[48,1591,1520],{"class":54},[48,1593,1594],{"class":58},"btn-yellow",[48,1596,774],{"class":54},[48,1598,1599,1601,1603,1605,1607],{"class":50,"line":396},[48,1600,1049],{"class":68},[48,1602,72],{"class":54},[48,1604,1443],{"class":54},[48,1606,1160],{"class":96},[48,1608,79],{"class":54},[48,1610,1611,1613,1615,1617,1620,1622],{"class":50,"line":428},[48,1612,1292],{"class":68},[48,1614,72],{"class":54},[48,1616,1443],{"class":54},[48,1618,1619],{"class":96},"b3a900",[48,1621,1512],{"class":54},[48,1623,1515],{"class":54},[48,1625,1626,1628,1631],{"class":50,"line":460},[48,1627,1520],{"class":54},[48,1629,1630],{"class":58},"btn-green",[48,1632,774],{"class":54},[48,1634,1635,1637,1639,1641,1643],{"class":50,"line":492},[48,1636,1049],{"class":68},[48,1638,72],{"class":54},[48,1640,1443],{"class":54},[48,1642,1179],{"class":96},[48,1644,79],{"class":54},[48,1646,1647,1649,1651,1653,1656,1658],{"class":50,"line":501},[48,1648,1292],{"class":68},[48,1650,72],{"class":54},[48,1652,1443],{"class":54},[48,1654,1655],{"class":96},"004d22",[48,1657,1512],{"class":54},[48,1659,1515],{"class":54},[48,1661,1662,1664,1667],{"class":50,"line":506},[48,1663,1520],{"class":54},[48,1665,1666],{"class":58},"btn-blue",[48,1668,774],{"class":54},[48,1670,1671,1673,1675,1677,1679],{"class":50,"line":516},[48,1672,1049],{"class":68},[48,1674,72],{"class":54},[48,1676,1443],{"class":54},[48,1678,1197],{"class":96},[48,1680,79],{"class":54},[48,1682,1683,1685,1687,1689,1692,1694],{"class":50,"line":547},[48,1684,1292],{"class":68},[48,1686,72],{"class":54},[48,1688,1443],{"class":54},[48,1690,1691],{"class":96},"003d6b",[48,1693,1512],{"class":54},[48,1695,1515],{"class":54},[48,1697,1698,1700,1703],{"class":50,"line":588},[48,1699,1520],{"class":54},[48,1701,1702],{"class":58},"btn-purple",[48,1704,774],{"class":54},[48,1706,1707,1709,1711,1713,1715],{"class":50,"line":628},[48,1708,1049],{"class":68},[48,1710,72],{"class":54},[48,1712,1443],{"class":54},[48,1714,1215],{"class":96},[48,1716,79],{"class":54},[48,1718,1719,1721,1723,1725,1728,1730],{"class":50,"line":668},[48,1720,1292],{"class":68},[48,1722,72],{"class":54},[48,1724,1443],{"class":54},[48,1726,1727],{"class":96},"490442",[48,1729,1512],{"class":54},[48,1731,1515],{"class":54},[10,1733,1734],{},"それぞれの色パターンのボタンクラスができました。実際に適用してみると以下の通りです。",[1736,1737],"image-render",{":src":1738},"'useful-sass-mixins\u002Fsch2021-06-28 22.50.04.png'",[10,1740,1741],{},"mapとeachを使うとカラーパターンのクラスを簡単に実装できます。",[1743,1744,1745],"style",{},"html pre.shiki code .sAklC, html code.shiki .sAklC{--shiki-default:#89DDFF}html pre.shiki code .s5Dmg, html code.shiki .s5Dmg{--shiki-default:#FFCB6B}html pre.shiki code .s6YsC, html code.shiki .s6YsC{--shiki-default:#B2CCD6}html pre.shiki code .s0W1g, html code.shiki .s0W1g{--shiki-default:#BABED8}html pre.shiki code .sx098, html code.shiki .sx098{--shiki-default:#F78C6C}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s6cf3, html code.shiki .s6cf3{--shiki-default:#89DDFF;--shiki-default-font-style:italic}html pre.shiki code .sfyAc, html code.shiki .sfyAc{--shiki-default:#C3E88D}html pre.shiki code .sC9rS, html code.shiki .sC9rS{--shiki-default:#464B5D;--shiki-default-font-style:italic}html pre.shiki code .sdLwU, html code.shiki .sdLwU{--shiki-default:#82AAFF}",{"title":44,"searchDepth":82,"depth":82,"links":1747},[1748,1749],{"id":34,"depth":65,"text":34},{"id":1078,"depth":65,"text":1078},[1751],"ministack","2021-06-28","設定しておきたいmixinと記述週",null,{},"\u002Farticles\u002Fuseful-sass-mixins",{"title":5,"description":1753},"articles\u002Fuseful-sass-mixins",[1423],"useful-sass-mixins\u002Fthumbnail.png","ZczNQ4FtkqMbeh7MFTHHTJ3BRi4RWjEA8rwabquN6pI",1780987145697]