我如何将这些代码重构为sass?

时间:2015-12-22 10:38:58

标签: css css3 sass compass

#table_1 
tr:nth-child(odd) td:nth-child(even),
#table_1 
tr:nth-child(even) td:nth-child(odd)
background: #ccc
background: -moz-linear-gradient(top, #ccc, #eee)
background: -webkit-gradient(linear,0 0, 0 100%, from(#ccc), to(#eee))
box-shadow: inset 0 0 10px rgba(0,0,0,.4)
-moz-box-shadow: inset 0 0 10px rgba(0,0,0,.4)
-webkit-box-shadow: inset 0 0 10px rgba(0,0,0,.4)

我希望把它变成没有任何分号的sass,这样它就会在罗盘中编译。

到目前为止,我收到以下错误:“只允许在规则,指令,mixin包含或其他属性中使用属性。”

代码无法编译。

1 个答案:

答案 0 :(得分:2)

这是SASS嵌套的便捷指南:http://sass-lang.com/guide#topic-3

public class MainActivity extends ActionBarActivity implements FragmentDrawer.FragmentDrawerListener {

private static String TAG = MainActivity.class.getSimpleName();

private Toolbar mToolbar;
private FragmentDrawer drawerFragment;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    mToolbar = (Toolbar) findViewById(R.id.toolbar);

    setSupportActionBar(mToolbar);
    getSupportActionBar().setDisplayShowHomeEnabled(true);

    drawerFragment = (FragmentDrawer)
            getSupportFragmentManager().findFragmentById(R.id.fragment_navigation_drawer);
    drawerFragment.setUp(R.id.fragment_navigation_drawer, (DrawerLayout) findViewById(R.id.drawer_layout), mToolbar);
    drawerFragment.setDrawerListener(this);

    // display the first navigation drawer view on app launch
    displayView(0);
}


@Override
public boolean onCreateOptionsMenu(Menu menu) {
    // Inflate the menu; this adds items to the action bar if it is present.
    getMenuInflater().inflate(R.menu.menu_main, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    // Handle action bar item clicks here. The action bar will
    // automatically handle clicks on the Home/Up button, so long
    // as you specify a parent activity in AndroidManifest.xml.
    int id = item.getItemId();

    //noinspection SimplifiableIfStatement
    if (id == R.id.action_settings) {
        return true;
    }



    return super.onOptionsItemSelected(item);
}

@Override
public void onDrawerItemSelected(View view, int position) {
    displayView(position);
}

private void displayView(int position) {
    Fragment fragment = null;
    String title = getString(R.string.app_name);
    switch (position) {
        case 0:
            fragment = new HomeFragment();
            title = getString(R.string.title_home);
            break;
        default:
            break;
    }

    if (fragment != null) {
        FragmentManager fragmentManager = getSupportFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        fragmentTransaction.replace(R.id.container_body, fragment);
        fragmentTransaction.commit();

        // set the toolbar title
        getSupportActionBar().setTitle(title);
    }
}

应该生成:

#table_1 
  tr:nth-child(odd)
    tr:nth-child(even)
      width: 100%
  tr:nth-child(even)
    tr:nth-child(odd)
      width: 100%

http://www.sassmeister.com/gist/55fc83f073a05ec581b0

编辑:

为背景和边框半径添加几个mixin:

#table_1 tr:nth-child(odd) tr:nth-child(even) {
  width: 100%;
}

#table_1 tr:nth-child(even) tr:nth-child(odd) {
  width: 100%;
}