Giter Club home page Giter Club logo

sass-site's Introduction

Sass

@SassCSS on Twitter    stackoverflow    Gitter

Sass makes CSS fun again. Sass is an extension of CSS, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a plugin for your build system.

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
     -moz-border-radius: $radius;
      -ms-border-radius: $radius;
          border-radius: $radius;
}

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { @include border-radius(10px); }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

Install Sass

You can install Sass on Windows, Mac, or Linux by downloading the package for your operating system from GitHub and adding it to your PATH. That's all—there are no external dependencies and nothing else you need to install.

If you use Node.js, you can also install Sass using npm by running

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!

See the Sass website for more ways to install Sass.

Once you have Sass installed, you can run the sass executable to compile .sass and .scss files to .css files. For example:

sass source/stylesheets/index.scss build/stylesheets/index.css

Learn Sass

Check out the Sass website for a guide on how to learn Sass!

This Repository

This repository isn't an implementation of Sass. Those live in sass/dart-sass and sass/libsass. Instead, it contains:

  • spec/, which contains specifications for language features.
  • proposal/, which contains in-progress proposals for changes to the language.
  • accepted/, which contains proposals that have been accepted and are either implemented or in the process of being implemented.

Note that this doesn't contain a full specification of Sass. Instead, feature specifications are written as needed when a new feature is being designed or when an implementor needs additional clarity about how something is supposed to work. This means many of the specs in spec/ only cover small portions of the features in question.

Versioning Policy

The proposals in this repository are versioned, to make it easy to track changes over time and to refer to older versions. Every version has a Git tag of the form proposal.<name>.draft-<version>. A new version should be created for each batch of changes.

Every version has a major version, and they may have a minor version as well (indicated <major>.<minor>). The minor version should be incremented for changes that don't affect the intended semantics of the proposal; otherwise, the major version should be incremented.

sass-site's People

Contributors

adekunleoduye avatar benfrain avatar bpainter avatar chriseppstein avatar dependabot[bot] avatar disco-trooper avatar dvdherron avatar edull24 avatar garthdb avatar goodwine avatar hamptonmakes avatar jamesnw avatar jathak avatar jerivas avatar jgerigmeyer avatar jina avatar leo avatar malrase avatar marioricalde avatar michaelparenteau avatar mr21 avatar nex3 avatar nschonni avatar oluoluoxenfree avatar pamelalozano16 avatar sanajaved7 avatar sassbot avatar stacyk avatar stof avatar tatianamac avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sass-site's Issues

CSS Testing

Hi guys,
I have some experience in CSS testing.
What if we (I mean myself) spend some times in creates a test suite for CSS Regression?

It would a pleasure to me integrate Grunt and PhantomCSS providing some starting example. Then, we can scale testing to everyone (expecially to who's responsible for code reviews) and create safety grid around the main blocks of css (navigation, callouts ...).

Before make any line of code I prefered to ask infos and permission.
See u.
Fabio.

Sass logo vector version

Hey,

right now the .eps version of the Sass logo is available only for latest CS (17.0).
http://sass-lang.com/styleguide/brand/
I would suggest to save it with a lower version compat.
I'm trying to do a little something for SassDoc with it, but I'm on 16.0.
Got a crappy .pdf conversion from preview.

Could you provide me such a file please ?

Open Source Applications

While we want to support all applications that use Sass, we are an open source project, and promoting paid/closed applications that don't directly support the project can be problematic. In the current configuration, the very first link is to go pay someone else, unrelated to the project, on the "Install Sass" guide, when there are good open source versions. A user might click on that thinking there is an official relationship, or that Sass costs money.

I get that alphabetical was used to try and be fair, and that's fine, but we need it to be very, very, very clear what is paid and what is open source. It can't be subtle.

I have a pull request I am going to do that tries to address this. The greyed out, subtle "paid" icon we have now is just not enough. Another approach is to group free / paid (with an indicator for open source).

We need to support, not necessarily promote, the Sass application ecosystem.

Sporadic alert "Browsers prevent navigation from inside iframes [...]"

Getting sporadic "Browsers prevent navigation from inside iframes across domains" alerts from http://sass-lang.com/assets/js/sass-ddebecc7.js in Fx 27.0.1 on sass-lang.com. Happened twice so far.

Haven't managed to reproduce it yet, nor to analyse the js in detail but at first glance:

Happy easter, bro and sista

Because - to me - community is also gratitude and kindness.
Thanks github, thank you all for your great job with this project.

Design an official .scss icon

This could be useful for a number of reasons:

  • custom file-system UIs where a small file type icon is shown, many sites still use the FamFamFam tiny icons for file types, so maybe something in align with that set
  • maybe a web-font version too and submit a pull-request of the official icon to Font Awesome

Incorporate and bring libSass into the Sass community.

I would like to start a discussion on what libSass means to the future of the Sass community and if it should be included and promoted on the new site. It is the foundation to run Sass on any platform and should be considered a significant advantage of Sass vs it's alternatives. @hcatlin would love your opinion specifically.

Responsive Test page is broken

From sass/sass#1374:

I've been designing responsive using the very useful Responsive Test page on sass-lang.com for quite a while now.

Sass Responsive Test

However - clicking on the link above demonstrates that the URL box for the test is now covered up by a banner for Sass sticker sales. Hence we can no longer use this page to help design our sites.

I'm pretty sure Ive seen similar utilities online somewhere (any suggestions welcome) to replace this with .. but .. I'm pretty sure this is not what you guys intended. Thanks :)

docs on yardoc

hi! where can I get the documentation done on yardoc for the site?

How To Get Involved

I'd like to help get this pushed out by the time SassConf rolls around. Where is help needed? I've got it up and running locally. I've also noticed a handful of bugs in the Sass itself, in some of the features (like the menu), some of the content (for instance, no serious Drupal Sass user uses the Sass module), etc…

So, how can I help?

Incorporate original ideas into new branding

From a design perspective, I'd really like to see the new branding incorporate more of the original ideas around sass. See sass/sass#349 (comment)

Would this be possible? Was Hampton consulted at all regarding the new design? I know the new logo is consider completed, but maybe there is an opportunity for a few revisions.

Sass-related project logo boilerplates + co-brand guidelines

Lots of Sass-related projects want to use the Sass branding in a nice, professional-looking way. So we can offer an editable vector file as a boilerplate with co-brand guidelines in the style guide. @bpainter, if you have time, please feel free to own this since you designed the logo. But if not, I can take a stab at it once I get some time (maybe this weekend)?

Color functions issue

Not sure what's going on but I am unable to use several color functions.

Examples

I have this rule:

  1. .highlight { background:tint($orange, 20%); }
  2. .highlight { background:saturate(red, 50%); }

And it compiles to this:

  1. highlight { background: tint(#f87f16, 20%); }
  2. .highlight { background: red; }

Screen capture:

some color functions not working in sass

I'm using Sass 3.3.4.

Any idea why is this happening?

Thanks,

Sass Training Videos

I’m Colin Boyd the Content Director at Infinite Skills, we create video based training and recently we’ve just released a training video aimed towards beginners looking to learn Sass ( http://www.infiniteskills.com/training/learning-sass-syntactically-awesome-stylesheets.html ). I was wondering if you’d consider including a link along with the other video based listings on your http://sass-lang.com/community page ?

We would also be open to providing a few digital copies for free that you could maybe offer to deserving members or use in a raffle or other competition.

Thanks
Colin

libsass.com?

So, not sure about this one. But, should we move libsass.com over to this site? Maybe as a subsection? I'm concerned though about confusing the difference between the projects though.

I'm opening this ticket, because it's up to the sass-site team to determine if they want libsass' web presence on the same domain or not.

Thoughts?

Charset meta should appear before title

The charset meta should appear before the title of the page to avoid UTF-7 XSS on potential user-contributed content (even if the risk probably does not exist in this context, it's better to explicitly declare the charset before the title).

Rename repo?

So we're not using GitHub pages; we're using Middleman & Heroku instead. Should we rename the repo? /cc @nex3

eventmachine

Hi, can you upgrade gem eventmachine in Gemfile.lock? i cant build site in middleman because eventmachine -v 1.0.3 not installing, just 1.0.7

Considering compatibility.sass-lang.com

@jina suggested we find a way to "include" http://sass-compatibility.github.io in Sass official site in one way or another. What about creating the compatibility subdomain (http://compatibility.sass-lang.com), and making it head to http://sass-compatibility.github.io? On my side, I can set up a CNAME file at the root of the repo.

What do you think? If you like the idea, I suppose we could move sass-compatibility in the sass organisation. No problem if you don't feel like so, it's just a suggestion.

Apostrophes are showing as ??? in browsers on Yosemite

I'm running Yosemite with Chrome 43 and noticing that apostrophes are showing as 3 question marks ("???") on all the documentation pages, such as:
http://sass-lang.com/documentation/file.SASS_REFERENCE.html#mixins

I don't mind fixing this and providing a pull request, but I can't find the actual doc files in the repo. I've ran bundle install and middleman, but it looks like the files are pulled from the URL http://sass-lang.com/documentation/file.SASS_REFERENCE.html. Is there another repo with the doc files?

Rework community page

Link farm is getting unwieldy. Gonna rework this to just be core/recommended essentials and add events.

Rewrite nesting section

Relates to #74

In the Sass Guide, the Nesting section seems to promote nesting your Sass like the DOM. That's actually bad practice. We should reword this.

FOUT - Font loading optimisation

I keep getting a Flash Of Unstyled Text of about 5 seconds on the homepage when browsing with a cold cache.

Maybe the 570 KB (422 KB gzipped) web font package can be optimised to avoid that. Is there a way to try narrowing the character set since the only language is English) and the lowering the number of weights?

There are also various techniques for removing the font download from the critical path, maybe that could help too.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.