Sass is a CSS preprocessor which enables advanced features not available in normal CSS.

learn more… | top users | synonyms (1)

0
votes
1answer
31 views

Excerpt from a grocery shopping site using SASS

I am a UI/UX designer. I am working on the HTML of a website, using Sass/scss+bootstrap 3 project. It's my first project in sass/scss. Now my developer's feedback is: HTML code is not up to mark. ...
2
votes
0answers
21 views

HTML/CSS - project's structure, BEM, turned from psd

I'd like to ask you for opinions about website. It is training template turned from someone's web design. Generally, I'd like to know what I should improve and how to be more effective with future ...
0
votes
1answer
18 views

HTML-formular with animated input-elements

The idea is to improve the usage of larger formulars. Done by adding a little animation to the input-elments. When one of the textboxes is clicked or focussed via tab appears a colored border. ...
1
vote
0answers
17 views

Sass-Mixin for to attach a text-shadow animation upon HTML-elements

I've make these mixins by using SCSS-Sass. Any hints and tipps concerning improvements are welcomed. ...
1
vote
0answers
11 views

Fake closure to provide variable scoping in SASS

For some time I've wanted a way to provide private scope to variables, functions, etc. that needed to be used across multiple separate selections. As far as I'm aware there is no official solution for ...
2
votes
0answers
49 views

Animation with JavaScript and Sass : Neon light banner

After reading a bit about CSS3-text-shadows and seeing a few advanced examples I had the idea for a "neon light"-banner. Next idea was to animate it. Finally it has become a mixture between a Sass-...
1
vote
1answer
39 views

SASS + Compass - File Structure and @Import order [closed]

I recently started using SASS and Compass in my projects. So far I am using the file structure shown below. ...
0
votes
2answers
40 views

Styling the font size in a nav bar

The font size scales up/down based on the size of the browser to fit the nav bar buttons (using @media). ...
0
votes
1answer
23 views

Flexbox & BEM 'table'

Using SCSS and React, I have made a little table (not an HTML table), which is responsive based on variable-width cells. That is to say, each cell whose width is not variable has a ...
0
votes
1answer
18 views

Render SVG background with Gradient

I'm new to and still fairly confounded by SVGs. I'm feeling pretty happy with the following hobbled together SCSS code demonstrated here: ...
3
votes
0answers
12 views

SASS mixin to define modifier classes for various screen sizes

I wish to make a mixin to produce the following result of modifier classes: ...
0
votes
0answers
16 views

My first form in BEM style + SASS

3 days ago I have found out about the BEM schemantic. I have googled a bit and tried to do my first login form with BEM + SASS. One problem I had, was to find correct names. However in my opinion as ...
0
votes
0answers
32 views

JavaScript News Ticker in Retro Style

I have chosen to do it in a some "Retro-Style". So that it shall remind one of old green-screen monitors. Version with working Ajax-Request and Sass-Code on Codepen : http://codepen.io/mizech/full/...
3
votes
1answer
98 views

Simple modals in vanilla JS

Recently I was looking for some really simple modal/popup solution in vanilla JS, but nothing popped. So I wrote mine component. It works great so far, have all the options I need, but I don't know if ...
2
votes
0answers
105 views

Gulp file for Jade, SASS, Optimize-html, jekyll and more

I have the following gulpfile which I use for development. It used to be a simple gulpfile with just jade compiling, sass, jekyll-rebuild, etc. but then I decided to add HTML Optimization my gulpfile ...
1
vote
0answers
27 views

Filtering potentially malicious user-defined CSS property values using ScssPhp

I have a script that allows stylesheet customization on a per-property basis. For example, I expose the "background-image" property for people to enter their own SCSS values to be entered in the mixin....
2
votes
1answer
159 views

Simple recipes web app with Redux

I have completed a coding challenge from Free Code Camp. The challenge's user stories are as follows: I can create recipes that have names and ingredients. I can see an index view where the ...
4
votes
3answers
389 views

Animated SVG pie chart with custom properties

I've made a small js/css/html module which purpose is to fill a pie chart up to a given percentage. Basically it could be used for instance as a filling pie chart that keep tracks of the amount of ...
3
votes
0answers
30 views

A 'top 100' app that displays list of users ordered in two different ways

I built a small app that gets data from a remote json file and displays it in a list of users. In each list item, an image of the user, their name, and their points tallies are shown. The list is ...
1
vote
1answer
32 views

Pattern that adds a different value to the same attribute for many classes

The purpose of this question is to get some advice for improving the following code in order to make it less repetitive. ...
5
votes
2answers
153 views

Start of a responsive website for a legal firm

Please have a look at the HTML/CSS/JS (there is very little JS at the moment) and give me some feedback as to how my code looks to you, what level of skills it looks like I have and how I can improve. ...
-1
votes
1answer
63 views

Reduce repetition in SCSS for panels of various colors

I have the following SCSS and I'm curious as to how I can improve it, and reduce the amount of repetition... I plan on adding more colors, but I don't wish to keep copy/pasting the same block over ...
8
votes
1answer
390 views

Google material ripple button effect

I have "translated" this example built with jQuery in vanilla JavaScript, but I'd like to know if there are better ways to do it. The jQuery version uses offset() ...
1
vote
0answers
46 views

While loops in SCSS to produce circles for an animation

I've finally written my first loop in SCSS, trying to avoid it for quite some time since I thought it was unnecessary (was writing vanilla CSS not so long ago, so I was used to manual work). However, ...
1
vote
1answer
63 views

DRYing out my Sass, looping through selectors

Need help with DRYing out my Sass... there is just so much repetition in here: ...
3
votes
1answer
148 views

More elegant Sass @mixin to create pseudo-element shapes

I picked up Sass last week, and I'm already diving into expressions. I have a @mixin that creates a CSS border triangle using the following call: ...
3
votes
1answer
336 views

Susy basic fixed grid

I'm new to Susy and I'm loving it. I've been learning and trying a simple example - a simple grid that contains two columns at a fixed resolution of 320 pixels. One test would be to have two side by ...
2
votes
1answer
60 views

First website written with SASS/SCSS

I figured this morning that I wanted to learn how to use SASS, so I decided to rewrite an existing project's CSS using SASS. The project itself isn't complete so this is just a rough draft of the ...
1
vote
0answers
285 views

Gulp file for a simple SVG/Sass project

Here's a simple gulpfile.js I'm using on a very simple project which basically consists of an animation built with Sass, SVG and very little JS. ...
5
votes
1answer
380 views

Sass code for displaying two simple search forms

Sass code for creating a basic search box. Resulting CSS used for two that are different widths. The goals is to define sass that generates CSS that is easily re-usable as well as concise and ...
2
votes
0answers
115 views

Modification of the headline line-height in the Compass vertical rhythm module

One thing nagged me about the compass vertical rhythm module; in the case the headline is too long and it occupies more than one line the line-height between the two lines looks way too massive and ...
1
vote
1answer
1k views

How can I organize polymer-element structure in order to embrace the Polymer way of developing custom elements?

My goal has been to learn Polymer so I started developing a complex combo-box element. I did my development on Plunker. Here is link to my plunk. I'm happy with ...
1
vote
1answer
154 views

Hover effects using HTML and SASS

I recently created one of my first hover effects using HTML and SASS. Since it is my first hover effect, I'm almost positive that is it horribly inefficient. I'm sure there's a way to do this effect ...
2
votes
1answer
64 views

Checking screen sizes for responsive site

I wrote this piece of code to make any breakpoint to the users choice: ...
7
votes
1answer
519 views

Photo gallery layout

I'm working on a photo website, the markup looks like this: ...
6
votes
1answer
501 views

Grid column size calculation

I have a one function to calculate all the possible widths plus the margins for the gutters. In this same function, the grid ...
5
votes
1answer
113 views

SASS grid system improvements

I've got this own made grid system made in SASS: ...
2
votes
0answers
172 views

Blade (similar to Jade) template with SCSS

I have this blade template with a main.scss file: ...
6
votes
1answer
75 views

Member list reveals member information on click (#2)

Not a follow-up, but related to Member list reveals member information on click (#1). I now want my CSS reviewed. What I'm doing? The content in a list of members is revealed by jQuery (see review #...
8
votes
1answer
174 views

Improve mixin that outputs page-specific CSS

As part of this answer, I created a mixin to generate some page-specific CSS for me. I need to style an element based on a class I assign to the html-element. I do ...
8
votes
2answers
255 views

Improve page-specific CSS for different color schemes

For a website with four pages (blog, portfolio, profil and impressum) I have four different color schemes (for links, headings, code, etc.). This results in bloated CSS which I want to reduce. Here ...
2
votes
2answers
99 views

Quickly fixing unmaintainable SCSS code in Rails

I've been working on a website and Rails and am fairly proud of my HTML semantics. However, my CSS code has become enormous in size, which is largely unnecessary for such a small website. How could I ...
3
votes
1answer
144 views

SASS Code Structure / Readability

I'm trying out a new approach to SASS stylesheets, which I'm hoping will make them more organizined, maintainable, and readable. I often feel like there is a thin line between code that is well ...
4
votes
3answers
840 views

Mixin, @extend or (silent) class?

I am struggling with the basic concepts of SASS. I have a page that has multiple section, all of them are sharing properties like width, ...
4
votes
0answers
249 views

SaSSified version of Skeleton CSS

Recently I have been developing a SASSified version of Dave Gamache's Skeleton CSS front-end framework. I have publicly posted the code on github as well as a live demo. What I am looking for is ...
12
votes
1answer
242 views

Comments on SASS from CSS for a SASS beginner

I've leaped into SASS and am loving it. I'm asking for comments here on whether my SASS is well-formatted. Here's the original CSS based on Zurb's Foundation Pagination styles, but adapted for use ...
4
votes
1answer
71 views

Innefficient scss selectors being generated

Im using Foundation by Zurb as a front-end framework. Below is the SCSS used to generate the basic layout of the homepage using the Semantic Grid Mixins Foundation supplies (http://foundation.zurb.com/...
3
votes
1answer
106 views

SASS 960 fluid grid

I'm currently converting a CSS 960 fluid grid to SASS. How can I improve my current implementation? My column classes .two.columns are getting a bit unruly. Is ...