Learning the pros and cons of SASS made me want to find out if CSS had similar functions that I could use instead. I did some research on MDN and W3Schools and discovered it did for variables and nesting!<\/p>\n\n\n\n\n\n\n\n
In the CSS stylesheet, we first declare the variables by using root:. The custom properties are then defined using two dashes, such as –blue. Please note that custom properties are case-sensitive. –Blue is not the equivalent of –blue.<\/p>\n\n\n\n
Once the custom properties are defined under :root, we put the variables into rules for the selectors by using var().<\/p>\n\n\n\n
Example:<\/p>\n\n\n\n
:root { --blue: #1e90ff; }<\/code><\/pre>\n\n\n\nbody { background-color: var(--blue); }<\/code><\/pre>\n\n\n\nUsing CSS Nesting<\/a><\/h2>\n\n\n\nNesting works in CSS similarly to SASS. You put the child selector inside the parent’s } symbol. Remember to put an & symbol in front of nested compound and pseudo classes, such as :hover.<\/p>\n\n\n\n
You can also put the & symbol in front of other nested child elements to ensure ensure backwards compatibility and make them easier to identify.<\/p>\n\n\n\n
.parent { color: blue;<\/code><\/pre>\n\n\n\n& #child { font-size: 1em; }<\/code><\/pre>\n\n\n\n}<\/code><\/pre>\n\n\n\nI was disappointed to learn CSS doesn’t yet have a mixin or extend feature. Fingers crossed they will be added in the future!<\/p>\n","protected":false},"excerpt":{"rendered":"
Learning the pros and cons of SASS made me want to find out if CSS had similar functions that I could use instead. I did some research on MDN and W3Schools and discovered it did for variables and nesting!<\/p>\n","protected":false},"author":94,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[240],"tags":[32,4,3],"class_list":["post-2079","post","type-post","status-publish","format-standard","hentry","category-aad-086-sp25","tag-coding","tag-css","tag-html"],"_links":{"self":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2079","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/users\/94"}],"replies":[{"embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/comments?post=2079"}],"version-history":[{"count":1,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2079\/revisions"}],"predecessor-version":[{"id":2080,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/posts\/2079\/revisions\/2080"}],"wp:attachment":[{"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/media?parent=2079"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/categories?post=2079"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/appliedartand.design\/lj\/wp-json\/wp\/v2\/tags?post=2079"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}