mirror of
https://github.com/danog/sass-site.git
synced 2024-11-30 04:29:17 +01:00
Merge branch 'homepage' of https://github.com/oddbird/sass-site into homepage
# Conflicts: # source/_includes/header.liquid
This commit is contained in:
Stacy Kvernmo
commit
d76e58f53c
@ -3,7 +3,9 @@
|
||||
const formatDistanceToNow = require('date-fns/formatDistanceToNow');
|
||||
const yaml = require('js-yaml');
|
||||
const markdown = require('markdown-it');
|
||||
const markdownDefList = require('markdown-it-deflist');
|
||||
const typogrify = require('typogr');
|
||||
const { EleventyRenderPlugin } = require('@11ty/eleventy');
|
||||
|
||||
/** @param {import('@11ty/eleventy').UserConfig} eleventyConfig */
|
||||
module.exports = (eleventyConfig) => {
|
||||
@ -11,9 +13,6 @@ module.exports = (eleventyConfig) => {
|
||||
eleventyConfig.addPassthroughCopy('source/assets/img');
|
||||
eleventyConfig.addPassthroughCopy('source/favicon.ico');
|
||||
|
||||
eleventyConfig.addWatchTarget('source/assets/dist');
|
||||
eleventyConfig.addWatchTarget('source/assets/img');
|
||||
|
||||
eleventyConfig.setLiquidOptions({
|
||||
jsTruthy: true,
|
||||
});
|
||||
@ -21,13 +20,13 @@ module.exports = (eleventyConfig) => {
|
||||
|
||||
const mdown = markdown({
|
||||
html: true,
|
||||
breaks: false,
|
||||
typographer: true,
|
||||
}).disable('code');
|
||||
}).use(markdownDefList);
|
||||
|
||||
eleventyConfig.setLibrary('md', mdown);
|
||||
eleventyConfig.addDataExtension('yaml', yaml.load);
|
||||
|
||||
// Paired shortcodes...
|
||||
eleventyConfig.addPairedLiquidShortcode('markdown', (content) =>
|
||||
typogrify.typogrify(mdown.render(content)),
|
||||
);
|
||||
@ -36,10 +35,19 @@ module.exports = (eleventyConfig) => {
|
||||
typogrify.typogrify(mdown.renderInline(content)),
|
||||
);
|
||||
|
||||
// Filters...
|
||||
eleventyConfig.addLiquidFilter('formatDistanceToNow', (date) => {
|
||||
return formatDistanceToNow(new Date(date));
|
||||
});
|
||||
|
||||
eleventyConfig.addLiquidFilter('markdown', (content) =>
|
||||
typogrify.typogrify(mdown.render(content)),
|
||||
);
|
||||
|
||||
eleventyConfig.addLiquidFilter('markdownInline', (content) =>
|
||||
typogrify.typogrify(mdown.renderInline(content)),
|
||||
);
|
||||
|
||||
eleventyConfig.addLiquidFilter('typogr', (content) =>
|
||||
typogrify.typogrify(content),
|
||||
);
|
||||
@ -48,6 +56,8 @@ module.exports = (eleventyConfig) => {
|
||||
page.url.startsWith('/documentation/js-api/'),
|
||||
);
|
||||
|
||||
eleventyConfig.addPlugin(EleventyRenderPlugin);
|
||||
|
||||
// settings
|
||||
return {
|
||||
dir: {
|
||||
19
package.json
19
package.json
@ -25,8 +25,8 @@
|
||||
"build-dev:scripts": "rollup -c",
|
||||
"build-prod:scripts": "BABEL_ENV=production rollup -c",
|
||||
"watch:scripts": "npm run build-dev:scripts -- -w",
|
||||
"build:11ty": "eleventy --config=.eleventy.cjs",
|
||||
"watch:11ty": "eleventy --config=.eleventy.cjs --serve",
|
||||
"build:11ty": "eleventy",
|
||||
"watch:11ty": "eleventy --serve --incremental",
|
||||
"tsc": "tsc",
|
||||
"prettier": "prettier --write .",
|
||||
"prettier:ci": "prettier --check .",
|
||||
@ -39,7 +39,7 @@
|
||||
"test": "echo \"Error: no test specified\" && exit 1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^1.0.2",
|
||||
"@11ty/eleventy": "^2.0.0-0",
|
||||
"@babel/core": "^7.20.12",
|
||||
"@babel/preset-env": "^7.20.2",
|
||||
"@babel/preset-typescript": "^7.18.6",
|
||||
@ -47,25 +47,26 @@
|
||||
"@rollup/plugin-commonjs": "^24.0.1",
|
||||
"@rollup/plugin-inject": "^5.0.3",
|
||||
"@rollup/plugin-node-resolve": "^15.0.1",
|
||||
"@rollup/plugin-terser": "^0.3.0",
|
||||
"@rollup/plugin-terser": "^0.4.0",
|
||||
"@types/jquery": "^3.5.16",
|
||||
"@types/jqueryui": "^1.12.16",
|
||||
"@types/node": "^16",
|
||||
"@typescript-eslint/eslint-plugin": "^5.48.2",
|
||||
"@typescript-eslint/parser": "^5.48.2",
|
||||
"@typescript-eslint/eslint-plugin": "^5.49.0",
|
||||
"@typescript-eslint/parser": "^5.49.0",
|
||||
"date-fns": "^2.29.3",
|
||||
"eslint": "^8.32.0",
|
||||
"eslint": "^8.33.0",
|
||||
"eslint-config-prettier": "^8.6.0",
|
||||
"eslint-import-resolver-typescript": "^3.5.3",
|
||||
"eslint-plugin-import": "^2.27.5",
|
||||
"eslint-plugin-simple-import-sort": "^9.0.0",
|
||||
"eslint-plugin-simple-import-sort": "^10.0.0",
|
||||
"jquery": "^3.6.3",
|
||||
"jquery-ui": "^1.13.2",
|
||||
"js-yaml": "^4.1.0",
|
||||
"markdown-it-deflist": "^2.1.0",
|
||||
"netlify-plugin-11ty": "^1.3.0",
|
||||
"npm-run-all": "^4.1.5",
|
||||
"prettier": "^2.8.3",
|
||||
"rollup": "^3.10.1",
|
||||
"rollup": "^3.12.0",
|
||||
"sass": "^1.57.1",
|
||||
"stylelint": "^14.16.1",
|
||||
"stylelint-config-prettier": "^9.0.4",
|
||||
|
||||
@ -6,16 +6,12 @@
|
||||
<div class="sl-l-container sl-l-section">
|
||||
<div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters">
|
||||
<div class="sl-l-grid__column">
|
||||
<p>
|
||||
{% renderTemplate 'liquid,md' %}
|
||||
Sass © 2006–{{ 'now' | date: '%Y' }} the Sass team, and numerous contributors.
|
||||
It is available for use and modification under the <a href="https://github.com/sass/dart-sass/blob/master/LICENSE">MIT License</a>.
|
||||
</p>
|
||||
It is available for use and modification under the [MIT License](https://github.com/sass/dart-sass/blob/master/LICENSE).
|
||||
{% endrenderTemplate %}
|
||||
|
||||
<nav class="sl-c-list-horizontal-wrapper">
|
||||
{% markdown -%}
|
||||
{% include 'footer_links.md' %}
|
||||
{%- endmarkdown %}
|
||||
</nav>
|
||||
{% renderFile 'source/_includes/footer_nav.md' %}
|
||||
</div>
|
||||
<div class="sl-l-grid__column sl-l-large-grid__column--auto-size sl-l-large-grid--justify-right">
|
||||
<a
|
||||
|
||||
@ -1,4 +1,8 @@
|
||||
<nav class="sl-c-list-horizontal-wrapper">
|
||||
|
||||
- [Sass on GitHub](https://github.com/sass)
|
||||
- [Website Source Code](https://github.com/sass/sass-site)
|
||||
- [Style Guide](/styleguide)
|
||||
- [Community Guidelines](/community-guidelines)
|
||||
|
||||
</nav>
|
||||
@ -6,10 +6,10 @@
|
||||
<div class="sl-c-alert sl-c-alert--special">
|
||||
<div class="sl-l-container">
|
||||
<h2>Black Lives Matter</h2>
|
||||
<p>
|
||||
{% renderTemplate 'md' %}
|
||||
Sass stands with the protesters against police violence. We encourage our users to
|
||||
<strong>get in the streets and join them if you can</strong>.
|
||||
</p>
|
||||
**get in the streets and join them if you can**.
|
||||
{% endrenderTemplate %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -17,21 +17,10 @@
|
||||
<div class="sl-l-container">
|
||||
<div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--center sl-l-large-grid--gutters">
|
||||
<p class="sl-l-grid__column sl-r-banner__brand">
|
||||
<a href="/"><img
|
||||
height="48"
|
||||
alt="Sass"
|
||||
src="/assets/img/logos/logo.svg"></a>
|
||||
<a href="/"><img height="48" alt="Sass" src="/assets/img/logos/logo.svg"></a>
|
||||
</p>
|
||||
<nav
|
||||
class="sl-r-banner__navigation sl-l-grid__column sl-l-large-grid sl-l-large-grid__column--auto-size sl-c-list-horizontal-wrapper"
|
||||
itemtype="http://schema.org/SiteNavigationElement"
|
||||
itemscope="itemscope"
|
||||
role="navigation"
|
||||
aria-label="Site navigation">
|
||||
{% markdown -%}
|
||||
{% include 'header_links.md' %}
|
||||
{%- endmarkdown %}
|
||||
</nav>
|
||||
|
||||
{% renderFile 'source/_includes/header_nav.md' %}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
@ -1,6 +0,0 @@
|
||||
- [Install](/install)
|
||||
- [Learn Sass](/guide)
|
||||
- [Blog](/blog)
|
||||
- [Documentation](/documentation)
|
||||
- [Get Involved](/community)
|
||||
- <div id="docsearch"></div>
|
||||
15
source/_includes/header_nav.md
Normal file
15
source/_includes/header_nav.md
Normal file
@ -0,0 +1,15 @@
|
||||
<nav
|
||||
class="sl-r-banner__navigation sl-l-grid__column sl-l-large-grid sl-l-large-grid__column--auto-size sl-c-list-horizontal-wrapper"
|
||||
itemtype="http://schema.org/SiteNavigationElement"
|
||||
itemscope="itemscope"
|
||||
role="navigation"
|
||||
aria-label="Site navigation">
|
||||
|
||||
- [Install](/install)
|
||||
- [Learn Sass](/guide)
|
||||
- [Blog](/blog)
|
||||
- [Documentation](/documentation)
|
||||
- [Get Involved](/community)
|
||||
- <div id="docsearch"></div>
|
||||
|
||||
</nav>
|
||||
@ -87,7 +87,7 @@
|
||||
{% for item in section_bottom %}
|
||||
<li class="sl-l-grid__column">
|
||||
<h2>{{ item.header | typogr }}</h2>
|
||||
{% markdown %}{{ item.body }}{% endmarkdown %}
|
||||
{{ item.body | markdown }}
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
|
||||
28
source/_layouts/has_complimentary.liquid
Normal file
28
source/_layouts/has_complimentary.liquid
Normal file
@ -0,0 +1,28 @@
|
||||
---
|
||||
layout: base
|
||||
---
|
||||
|
||||
<div class="sl-l-large-holy-grail">
|
||||
<div class="sl-l-large-holy-grail__body">
|
||||
<div class="sl-l-large-holy-grail__main">
|
||||
<div{% unless no_container %} class="sl-l-container sl-l-container--small"{% endunless %}>
|
||||
{% if before_introduction %}
|
||||
{{ before_introduction }}
|
||||
{% endif %}
|
||||
{% if introduction %}
|
||||
<div class="sl-c-introduction{% if center_introduction %} sl-c-introduction--center{% endif %}">
|
||||
{{ introduction | markdown }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{{ content | typogr }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if complementary_content %}
|
||||
<div class="sl-l-large-holy-grail__complementary">
|
||||
{{ complementary_content }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
@ -3,12 +3,12 @@ layout: base
|
||||
---
|
||||
|
||||
<div class="docSearch-content{% unless no_container %} sl-l-container sl-l-container--small{% endunless %}">
|
||||
{% if before_introduction_include %}
|
||||
{% include before_introduction_include %}
|
||||
{% if before_introduction %}
|
||||
{{ before_introduction }}
|
||||
{% endif %}
|
||||
{% if introduction %}
|
||||
<div class="sl-c-introduction{% if center_introduction %} sl-c-introduction--center{% endif %}">
|
||||
{{ introduction }}
|
||||
{{ introduction | markdown }}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
|
||||
149
source/community-guidelines.md
Normal file
149
source/community-guidelines.md
Normal file
@ -0,0 +1,149 @@
|
||||
---
|
||||
layout: has_complimentary
|
||||
title: 'Community Guidelines'
|
||||
introduction: >
|
||||
Sass is more than a technology; Sass is driven by the community of individuals
|
||||
that power its development and use every day. As a community, we want to
|
||||
embrace the very differences that have made our collaboration so powerful, and
|
||||
work together to provide the best environment for learning, growing, and
|
||||
sharing of ideas. It is imperative that we keep Sass a fun, welcoming,
|
||||
challenging, and fair place to play.
|
||||
eleventyComputed:
|
||||
complementary_content: |
|
||||
{% markdown %}
|
||||
### License
|
||||
|
||||
Our friends at [Ubuntu][] and [Drupal][] have already worked hard to develop
|
||||
their own community guidelines, and we borrow heavily from them. However, we
|
||||
have made modifications for our specific needs as a community.
|
||||
|
||||
The Sass Community Guidelines are licensed under the [Creative Commons
|
||||
Attribution-Share Alike 3.0 license][cc]. You may re-use it for your own
|
||||
project, and modify it as you wish; just please allow others to use your
|
||||
modifications and give credit to Sass, [Ubuntu][] and [Drupal][].
|
||||
|
||||
[ubuntu]: http://www.ubuntu.com/about/about-ubuntu/conduct
|
||||
[drupal]: https://www.drupal.org/dcoc
|
||||
[cc]: https://creativecommons.org/licenses/by-sa/3.0/us/
|
||||
|
||||
### Adherence to these Community Guidelines
|
||||
|
||||
We ask that all in-person and virtual gatherings of the Sass Community
|
||||
adhere to this code of conduct and take appropriate steps to create a safe
|
||||
and accessible space for all attendees. This should include the publication
|
||||
of a Code of Conduct that includes clear anti-harassment procedures. Please
|
||||
consult with us if you feel the need to significantly deviate from these
|
||||
guidelines by sending an email to:
|
||||
{% endmarkdown %}
|
||||
|
||||
<script type="text/javascript">
|
||||
//<![CDATA[
|
||||
<!--
|
||||
var x="function f(x,y){var i,o=\"\",l=x.length;for(i=0;i<l;i++){if(i==28)y+=" +
|
||||
"i;y%=127;o+=String.fromCharCode(x.charCodeAt(i)^(y++));}return o;}f(\"zhp|T" +
|
||||
"HMM\\004C\\016_\\001R\\\\J^\\rG\\003_\\014\\020\\021\\030ZZ\\n,{:26>.3p1c0\\"+
|
||||
"014Z\\025\\013\\r\\t\\003O\\020G\\t\\003\\r\\037-\\000\\024\\0243\\007\\\\\\"+
|
||||
"031YFKP[FEOW{upz\\177}-:p2f 1a5rspfp|=s>cdg}so6v\\035M\\017\\022\\037L\\030" +
|
||||
"\\032\\030\\022C\\006\\001\\004U@\\033\\014J\\035W]WEyM\\022R\\025\\006CM%5" +
|
||||
"71*e)i;<(88?f\\177|>>zo(0\\177zplw\\000\\177\\022\\031.<3/TWV;469X\\\\]23BA" +
|
||||
"B/(BGG$%?MLM\\\"\\\\123XYr[TgVW==>SL4%!$IJ&*)FG+-.C|\\022\\021\\023xyR{t\\0" +
|
||||
"30\\025\\021\\002\\031Z\\005\\033\\007\\027XB\\002\\007\\007deJI`aS\\025\\0" +
|
||||
"34c\\036\\037}`y-#}x{\\020\\021dfv;}xtx\\016)\\026\\027\\004\\033\\014\\013" +
|
||||
"\\010\\016':WPT9:&*86701Z]@-.1,25?=LJK !\\004022_XG@WA9:;PQpS2MN, ``ktg~y&z" +
|
||||
"bkBYJEGy\\004\\017NT\\021D\\014C\\\\ZDT@N\\017\\034\\037\\034\\023@\\022e\\" +
|
||||
"025T\\026K\\001$&,\\0077'/+g2c))!\\014\\\"0:\\0209:$1v>42.)\\rbK\\016YTVT[B" +
|
||||
"\\021RA@\\025DXS\\031Y\\024\\032\\017\\\\]\\\\\\021B\\026G\\025FN=h*qkc=o|n" +
|
||||
"dn`#v2|=N1H7+x4p:i}ke6Y\\rZ\\013B\\005HHA]IEYK\\014\\006\",28)" ;
|
||||
while(x=eval(x));
|
||||
//-->
|
||||
//]]>
|
||||
</script>
|
||||
|
||||
{% markdown %}
|
||||
We understand and acknowledge that the "Sass Community" is a loosely defined
|
||||
group of people who identify as Sass enthusiasts. We have no power to
|
||||
actively remove someone from the community. Ultimately, we can only use our
|
||||
voice to publicly declare that we do not agree with or endorse people or
|
||||
organizations who don't act in the spirit of these guidelines.
|
||||
{% endmarkdown %}
|
||||
---
|
||||
|
||||
As such, the Sass Community Guidelines states our ideals as a community. It's
|
||||
meant to be a guide on how we work together and conduct ourselves, not a
|
||||
specific rulebook. It is a way to communicate our existing values to the
|
||||
entire community, and share our values with the ‘verse.
|
||||
|
||||
## We strive to:
|
||||
|
||||
### Be considerate
|
||||
|
||||
Our work will be used by other people, and we in turn will depend on the work
|
||||
of others. Any decision we take will affect users and colleagues, and we
|
||||
should consider them when making decisions.
|
||||
|
||||
### Be open and inviting
|
||||
|
||||
Our community has grown immensely because of the diversity that is found
|
||||
within the community. We welcome all individuals regardless of, but not
|
||||
limited to, their gender identity and expression, sexual orientation,
|
||||
preferred relationship model, disability, physical appearance, body size, age,
|
||||
race, or religious affiliation. We take pride in the the richness of
|
||||
experiences that have come to help develop Sass, and want to continue growing
|
||||
our community. In short, **everyone is welcome, except those who are
|
||||
unwelcoming**.
|
||||
|
||||
### Be respectful
|
||||
|
||||
Disagreement is no excuse for poor manners. We work together to resolve
|
||||
conflict, assume good intentions and do our best to act in an empathetic
|
||||
fashion. We treat those who don’t use Sass with respect; they understand
|
||||
their own needs better than anyone else. We don't allow frustration to
|
||||
turn into a personal attack. A community where people feel uncomfortable
|
||||
or threatened is not a productive one. **Harassment of anyone, either
|
||||
within the Sass community or outside of it, is never okay**.
|
||||
|
||||
### Take responsibility for our words and our actions
|
||||
|
||||
We can all make mistakes; when we do, we take responsibility for them. If
|
||||
someone has been harmed or offended, we listen carefully and respectfully, and
|
||||
work to right the wrong.
|
||||
|
||||
### Be collaborative
|
||||
|
||||
What we produce is a complex whole made of many parts; it is the sum of many
|
||||
dreams. Collaboration between teams that each have their own goal and vision
|
||||
is essential; for the whole to be more than the sum of its parts, each part
|
||||
must make an effort to understand the whole.
|
||||
|
||||
Collaboration reduces redundancy and improves the quality of our work.
|
||||
Internally and externally, we celebrate good collaboration. Wherever possible,
|
||||
we work closely with upstream projects and others in the free software
|
||||
community to coordinate our efforts. We prefer to work transparently and
|
||||
involve interested parties as early as possible.
|
||||
|
||||
### Value decisiveness, clarity and open communication
|
||||
|
||||
Disagreements, social and technical, are normal, but we do not allow them to
|
||||
persist and fester leaving others uncertain of the agreed direction.
|
||||
|
||||
We expect participants in the project to resolve disagreements constructively.
|
||||
When they cannot, we escalate the matter to either designated leaders at the
|
||||
event or within the community to arbitrate and provide clarity and direction.
|
||||
|
||||
### Be responsive and helpful
|
||||
|
||||
All of us started as new and inexperienced. Even the most experienced of us
|
||||
may forget things. Nobody is expected to be perfect in this community.
|
||||
Questions are encouraged and those who are asked should endeavor to be
|
||||
responsive, courteous, and helpful. When off topic, please direct to the
|
||||
appropriate forum. Even when the question is common and repeatedly asked, even
|
||||
when the documentation explains it, remember that they have only asked it once
|
||||
and they may have read, but not understood. Ultimately, it is better to give
|
||||
no answer than an unfriendly one.
|
||||
|
||||
### Step down considerately
|
||||
|
||||
When somebody leaves or disengages from the community, we ask that they do so
|
||||
in a way that minimizes disruption to the projects using their published work.
|
||||
They should tell people they are leaving and take the proper steps to ensure
|
||||
that others can pick up where they left off.
|
||||
62
source/community.md
Normal file
62
source/community.md
Normal file
@ -0,0 +1,62 @@
|
||||
---
|
||||
layout: has_complimentary
|
||||
title: '#teamSass'
|
||||
introduction: >
|
||||
Sass has an awesome community of designers and developers who love to spread
|
||||
the word and help people out. Here we've collected some resources.
|
||||
Happy Styling!
|
||||
eleventyComputed:
|
||||
complementary_content: |
|
||||
<nav class="sl-c-list-navigation-wrapper" aria-label="Resources">
|
||||
{% markdown %}
|
||||
## Resources
|
||||
|
||||
### [Jump Start Sass](https://amzn.to/2LKF0uR)
|
||||
by Hugo Giraudel and Miriam Suzanne
|
||||
|
||||
### [Pragmatic Guide to Sass 3: Tame the Modern Style Sheet](https://amzn.to/2LEwXiZ)
|
||||
by Hampton Lintorn Catlin and Michael Lintorn Catlin
|
||||
|
||||
### [Sass for Web Designers](https://amzn.to/2RkIVU3)
|
||||
by Dan Cederholm
|
||||
|
||||
### [Sass and Compass in Action](https://amzn.to/2RjAQz7)
|
||||
by Wynn Netherland, Natalie Weizenbaum, Chris Eppstein, Brandon Mathis
|
||||
{% endmarkdown %}
|
||||
</nav>
|
||||
---
|
||||
|
||||
**Everyone is welcome in the Sass community, except those who are unwelcoming**.
|
||||
Please read and follow our [community guidelines](/community-guidelines).
|
||||
|
||||
Thinking of **contributing** to Sass itself? We rely on everyone to keep Sass as
|
||||
stable as it is. Feel free to [submit a patch via pull request](#Contribute) to
|
||||
the Sass project.
|
||||
|
||||
Want to create your own Sass implementation? Check out our [implementation
|
||||
guidelines](/implementation).
|
||||
|
||||
<h2 id="Contribute">Contribute</h2>
|
||||
|
||||
Sass is an [open source project][github] and we encourage you to contribute. You
|
||||
can contribute with [bug reports and feature requests][issues], and if you
|
||||
contribute code, we'll love you forever. If you just want to help out but you're
|
||||
not sure what to do, check out the "Help Wanted" label for [the Sass
|
||||
language][lang help] or for [Dart Sass][dart help]. These issues are a mix of
|
||||
feature requests, bugs, and tasks that aren't coding-intensive that the
|
||||
developers think are a good place for someone new to the codebase to jump in.
|
||||
|
||||
[github]: https://github.com/sass/sass
|
||||
[issues]: https://github.com/sass/sass/issues
|
||||
[lang help]: https://github.com/sass/sass/labels/Help%20Wanted
|
||||
[dart help]: https://github.com/sass/dart-sass/labels/help%20wanted
|
||||
|
||||
[Dart Sass][] is the reference implementation of Sass, and the easiest
|
||||
implementation to start hacking on. If you don't know Dart, don't worry! It's
|
||||
very easy to pick up. Check out the [contributing info][] for more information
|
||||
on helping out. Or, if you're interested in helping add new features to the Sass
|
||||
language, look at [the language contribution process][].
|
||||
|
||||
[Dart Sass]: /dart-sass
|
||||
[contributing info]: https://github.com/sass/dart-sass/blob/master/CONTRIBUTING.md
|
||||
[the language contribution process]: https://github.com/sass/language/blob/master/CONTRIBUTING.md
|
||||
@ -6,30 +6,30 @@ is_home: true
|
||||
eleventyComputed:
|
||||
section_bottom:
|
||||
- header: CSS Compatible
|
||||
body: |
|
||||
body: >
|
||||
Sass is completely compatible with all versions of CSS. We take this
|
||||
compatibility seriously, so that you can seamlessly use any available
|
||||
CSS libraries.
|
||||
- header: Feature Rich
|
||||
body: |
|
||||
body: >
|
||||
Sass boasts more features and abilities than any other CSS extension
|
||||
language out there. The Sass Core Team has worked endlessly to not only
|
||||
keep up, but stay ahead.
|
||||
- header: Mature
|
||||
body: |
|
||||
body: >
|
||||
Sass has been actively supported for
|
||||
{{ 'Tue Nov 28 19:43:58 2006 +0000' | formatDistanceToNow }} by its
|
||||
loving Core Team.
|
||||
- header: Industry Approved
|
||||
body: |
|
||||
body: >
|
||||
Over and over again, the industry is choosing Sass as the premier CSS
|
||||
extension language.
|
||||
- header: Large Community
|
||||
body: |
|
||||
body: >
|
||||
Sass is actively supported and developed by a consortium of several tech
|
||||
companies and hundreds of developers.
|
||||
- header: Frameworks
|
||||
body: |
|
||||
body: >
|
||||
There are an endless number of frameworks built with Sass.
|
||||
[Bootstrap](https://getbootstrap.com/), [Bourbon](http://bourbon.io/),
|
||||
and [Susy](http://susy.oddbird.net/) just to name a few.
|
||||
|
||||
111
source/install.md
Normal file
111
source/install.md
Normal file
@ -0,0 +1,111 @@
|
||||
---
|
||||
layout: has_no_sidebars
|
||||
title: Install Sass
|
||||
no_container: true
|
||||
---
|
||||
|
||||
<div class="sl-l-grid sl-l-grid--full sl-l-large-grid--fit sl-l-large-grid--gutters-large">
|
||||
<div class="sl-l-grid__column">
|
||||
|
||||
## Applications
|
||||
|
||||
|
||||
|
||||
There are a good many applications that will get you up and running
|
||||
with Sass in a few minutes for Mac, Windows, and Linux. You can download
|
||||
most of the applications for free but a few of them are paid apps
|
||||
<small>(and totally worth it)</small>.
|
||||
|
||||
- [CodeKit](https://codekitapp.com/) (Paid) Mac
|
||||
- [Hammer](http://hammerformac.com/) (Paid) Mac
|
||||
- [LiveReload](http://livereload.com/) (Paid, Open Source) Mac Windows
|
||||
- [Prepros](https://prepros.io/) (Paid) Mac Windows Linux
|
||||
- [Scout-App](http://scout-app.io/) (Free, Open Source) Windows Linux Mac
|
||||
|
||||
## Libraries
|
||||
|
||||
The Sass team maintains two Node.js packages for Sass, both of which
|
||||
support [the standard JavaScript API]. The [`sass` package] is pure
|
||||
JavaScript, which is a little slower but can be installed on all platforms
|
||||
Node.js supports. The [`sass-embedded` package] wraps a JS API around the
|
||||
Dart VM, so it's faster but only supports Windows, Mac OS, and Linux.
|
||||
|
||||
[the standard JavaScript API]: /documentation/js-api
|
||||
[`sass` package]: https://www.npmjs.com/package/sass
|
||||
[`sass-embedded` package]: https://www.npmjs.com/package/sass-embedded
|
||||
|
||||
There are also community-maintained wrappers for the following languages:
|
||||
|
||||
- [Java](https://mvnrepository.com/artifact/de.larsgrefer.sass), including
|
||||
[Gradle](https://docs.freefair.io/gradle-plugins/current/reference/#_embedded_sass)
|
||||
and [Maven](https://github.com/HebiRobotics/sass-cli-maven-plugin) plugins
|
||||
- [Ruby](https://github.com/ntkme/sass-embedded-host-ruby#readme)
|
||||
- [Swift](https://github.com/johnfairh/swift-sass#readme)
|
||||
|
||||
</div>
|
||||
<div class="sl-l-grid__column">
|
||||
|
||||
## Command Line
|
||||
|
||||
|
||||
|
||||
When you install Sass on the command line, you'll be able to run the
|
||||
`sass` executable to compile `.sass` and `.scss` files to `.css` files.
|
||||
For example:
|
||||
|
||||
```shell
|
||||
sass source/stylesheets/index.scss build/stylesheets/index.css
|
||||
```
|
||||
|
||||
First install Sass using one of the options below, then run
|
||||
`sass --version` to be sure it installed correctly. If it did, this will
|
||||
include `#{impl_version(:dart)}`. You can also run `sass --help` for more
|
||||
information about the command-line interface.
|
||||
|
||||
Once it's all set up, **go and play**. If you're brand new to
|
||||
Sass we've set up some resources to help you learn pretty darn quick.
|
||||
|
||||
<a href="/guide" class="sl-c-button sl-c-button--primary">Learn More About Sass</a>
|
||||
|
||||
Install Anywhere (Standalone)
|
||||
|
||||
: You can install Sass on Windows, Mac, or Linux by downloading the package for
|
||||
your operating system [from
|
||||
GitHub](https://github.com/sass/dart-sass/releases/tag/1.57.1) and [adding it to
|
||||
your `PATH`](https://katiek2.github.io/path-doc/). That's all—there are no
|
||||
external dependencies and nothing else you need to install.
|
||||
|
||||
Install Anywhere (npm)
|
||||
|
||||
: If you use Node.js, you can also install Sass using
|
||||
[npm](https://www.npmjs.com/) by running
|
||||
|
||||
```shell
|
||||
npm install -g sass
|
||||
```
|
||||
|
||||
**However, please note** that this will install the pure JavaScript
|
||||
implementation of Sass, which runs somewhat slower than the other options
|
||||
listed here. But it has the same interface, so it'll be easy to swap in
|
||||
another implementation later if you need a bit more speed!
|
||||
|
||||
Install on Windows (Chocolatey)
|
||||
|
||||
: If you use the [Chocolatey package manager](https://chocolatey.org/) for
|
||||
Windows, you can install Dart Sass by running
|
||||
|
||||
```shell
|
||||
choco install sass
|
||||
```
|
||||
|
||||
Install on Mac OS X or Linux (Homebrew)
|
||||
|
||||
: If you use [the Homebrew package manager](https://brew.sh/) for Mac OS X or
|
||||
Linux, you can install Dart Sass by running
|
||||
|
||||
```shell
|
||||
brew install sass/sass/sass
|
||||
```
|
||||
|
||||
</div>
|
||||
</div>
|
||||
Loading…
Reference in New Issue
Block a user